?
Solved

Different Colored text in <option>

Posted on 2011-10-18
8
Medium Priority
?
172 Views
Last Modified: 2012-05-12
Is it possible to color the * in this option red using CSS?
<option value="0">Please Make a Selection&nbsp;*</option>

Open in new window

0
Comment
Question by:Eddie Shipman
  • 3
  • 3
  • 2
8 Comments
 
LVL 2

Expert Comment

by:bbodine1
ID: 36986456
I would add a <span>*</span> around it and then set the style to color:red;
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 36987275
Huh?
0
 
LVL 2

Expert Comment

by:bbodine1
ID: 36987398
Change the html to this:
<option value="0">Please Make a Selection <span>*</span></option>

Open in new window


then add this in your style sheet:

option span{color:red;}

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 26

Author Comment

by:Eddie Shipman
ID: 36987420
I suppose that you haven't tried that because it will not work.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 36987601
I don't know of any way to do what you want.  Properties of selects and their children are in the control of the browser makers based on W3C standards. CSS and even scripting are not supposed to be able to override the properties of the select or related elements.  The limits are probably based on security concerns.  

About the only way you could do this would be to build a custom control to get the right look and use a pile of scripting to make it behave like a real select option.

There might be a widget in a script farm somewhere , but I do not recall ever seeing one.
0
 
LVL 2

Expert Comment

by:bbodine1
ID: 36987633
You're right. Can't get it to work. Here is a link to tinkerbin if you want to play with it.

http://tinkerbin.com/
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 36993511
Decided to put the * outside the select. Only way to style it.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 36994047
That is as good an approach as any.  There in  no gain in banging your head on a wall trying to make a browser do what it is not capable of doing. Knowing when to do a workaround and walk away is the big part of the learning curve in web development.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month17 days, 13 hours left to enroll

830 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