Solved

Style the Dropdown

Posted on 2009-07-07
2
517 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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)

867 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

20 Experts available now in Live!

Get 1:1 Help Now