Help Questions | Solutions | Experts

Select Categories Below

.net [

]

Bluetooth [

]

browsers [

]

C# [

]

computer [

]

Errors [

]

forms [

]

HTML [

]

information tec... [

]

internet [

]

Start Your Own Q&A Site

Create your own Q&A site easily, allowing you to quickly grow a new community around any subject matter or generate new organic traffic for your existing website.

Question

Status: Closed Points: 125 Time: 04:02 - Sep 26, 2007

mary2

How do I change the font color for an option within a SELECT tag in HTML?

I am creating a list in a select tag and I want to change the font for the text which will be displayed within the options, just for one option. Is there a way to accomplish this?

Example:

<select multiple size='5'>
<option>Text
<option>Text
<option>Text <------ I want to change the color of that text
<option>Text
<option>Text
</select>

Categories:

colors Text Color
Select Tag Changing Colors
Option Tag Defining Colors

Answer Discussion

Tutorials

rcastagna

Date:: Oct 10, 2007

Time:: 07:22

John,

It looks like you can do this a couple of different ways. Check out the code sample below:

<html>
<head>
<style>
  .red
  {
   color: red;
   font-size: 2em;
  }
</style>
</head>
<body>
<select multiple size='5'>
  <option>Text 1</option>
  <option>Text 2</option>
  <option class="red">Text 3</option>
  <option>Text 4</option>
  <option style="color: blue; font-weight: bold;">Text 5</option>
</select>
</body>
</html>

Let me know if this helps...

mary2

Date:: Oct 10, 2007

Time:: 07:27

Castagna...You are a genius. It worked great.

J

sivarampratapa

Date:: Apr 30, 2008

Time:: 16:04

what if i just want to change the color of '4' in this option <option>Text 4</option>
can anyone please suggest ?

sandeepkumar

Date:: Aug 24, 2009

Time:: 05:52

yes
It looks like you can do this a couple of different ways. Check out the code sample below:

<select>
<option>Text</option>
<option>Text</option>
<option style="color:#FF0000; font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-decoration:none;">Text  </option>
<option>Text</option>
<option>Text</option>
</select >

Question Answered

This question has been closed, and points have been rewarded to the following experts:

rcastagna:

125

You're welcome however to comment or give additional information or if you wish, you have the ability to write a Tutorial in the Tutorial Area.

Answer this Question

New User

Email:
Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:

Forgot Your Password?

No tutorials have been submitted yet. Want to be the first?