Solved

Style the Dropdown

Posted on 2009-07-07
2
515 Views
Last Modified: 2012-05-07
I have a dropdown that I want to change to another style. Black borders, black background, different arrow and so on.. how do i find an easy way for this? Thank's in advanced.

Beginner now. Intermediate later :)
0
Comment
Question by:dingir
  • 2
2 Comments
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 24807372
Easier way is change the style class

Here is sample code.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

		<title>Toggle Style for Select/Dropdown - Pravin Asar</title>

		<style type="text/css">

			select.one {

	background-color: #4499dd;

	font-size: 20px;

	border: none;

	width: 400px;

	}

	select.two {

	background-color: #dd9944;

	font-size: 30px;

	color: #ffffff;

	width: 200px;

}	

</style>

<script language="JavaScript">

	function ToggleClass() {

		if (document.getElementById('select1')) {

			if (document.getElementById('select1').className.match('one')) {

				document.getElementById('select1').className = 'two';

			}

			else {

				document.getElementById('select1').className = 'one';

				

			};

		}

	}

</script>

</head>

	<body>

		<a href="#" onclick="ToggleClass();">Toggle Style for Dropdown/ComboBox</a>

		<div>

			<select id="select1" class="one">

				<option value="1">Option Value 1</option>

				<option value="2">Option Value 2</option>

				<option value="3">Option Value 3</option>

			</select>

		</div>

	</body>

</html>

Open in new window

0
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 300 total points
ID: 24807587
If you want to do this with  Jquery,

look at following code.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Jquery : Simple Class Toggle Example </title>

		<style type="text/css">

			select.one {

				background-color: #4499dd;

				font-size: 20px;

				border: none;

				width: 400px;

			}

			select.two {

                background-color: #dd9944;                

                font-size: 30px;                

                color:#ffffff;

                width:200px;

                }				

		</style>

		<script language="JavaScript" src="lib/jquery/jquery-1.3.2.min.js">

		</script>

    </head>

    <body>

		<a href="#" onclick="$('#select1').toggleClass('two');">Toggle Style for Dropdown/ComboBox</a>

		<div>

			<select id="select1" class="one">

				<option value="1">Option Value 1</option>

				<option value="2">Option Value 2</option>

				<option value="3">Option Value 3</option>

			</select>

		</div>

		

    </body>

</html>

Open in new window

0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now