Solved

Font Color on SELECT options

Posted on 2012-03-22
2
304 Views
Last Modified: 2012-06-21
I want to have a different font color on some of the <option> of a <select>

The <option> list will be built dynamically via php.

What is the right syntax (css) for font color on the <option> element?
0
Comment
Question by:Richard Korts
2 Comments
 
LVL 7

Accepted Solution

by:
rgranlund earned 500 total points
Comment Utility
<option class="YOUR CLASS">

CSS:
.YOUR CLASS {
your attributes;
}
0
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
If it's built dynamically by PHP, you can't assign a class to a specific option then.  

What you could do(depending on which browser your trying to target), is use the nth-child in CSS.

Try the code below: (Remember this will not work in IE 8)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
	select option:nth-child(odd){color:#36f;}
</style>

</head>


<body>
<select>
	<option>Option 1 </option>
	<option>Option 1 </option>
	<option>Option 1 </option>
	<option>Option 1 </option>
	<option>Option 1 </option>
	<option>Option 1 </option>
	<option>Option 1 </option>
	<option>Option 1 </option>
</select>
</body>
</html>

Open in new window

0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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)

744 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

13 Experts available now in Live!

Get 1:1 Help Now