• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 486
  • Last Modified:

how to change the color of a text inside select box

Hi,

i have the following code

<select size="1" name="C1" >
 <option>no=1</option>
  <option>no=2</option>
  <option>no=3</option>
  <option>no=4</option>

how do i change the color of "no=" alone to some other color...to differentiate from number
0
whspider
Asked:
whspider
  • 3
1 Solution
 
abelCommented:
The best you can do in standard HTML and CSS is use the pseudo element :first-letter. Unfortunately, the designers of CSS never thought of :first-word. And it is not possible to use a <span> inside a listbox. However, there are many custom made listboxes around that basically mimic the listbox behavior using <div> tags.

Here's what I meant (and by using the Numero sign, the first two in the list, you can get the suggestion of two letter having a different color, but it is not pretty and it does not work on IE7):

option:first-letter {
    color: red;
}

Open in new window

ScreenShot289.png
0
 
whspiderAuthor Commented:
is there any way that we get the result in all cross browsers
0
 
abelCommented:
Only with extension select boxes. That means: building it yourself with using javascript and divs. Sorry, but that's the way it is and there's a lot of critique but the W3C committee so far has not changed it (in the future, yes, but not now).This is one of those cases where I have to disappoint and say "it cannot be done", really.

There are many (try google) alternatives, because many people hate this default style of the listboxes (and just so many people argue that you should not change it because people are accustomed to it). Here are two: one with checkboxes, and not the dropdown functionality, and one with a simple and clear tutorial (and only client side html + javascript what I see).
0
 
abelCommented:
I didn't give that link about "it cannot be done" for nothing. We love to help, but sometimes we must say that it cannot be done. The result is: a low grade. That's not the idea and that takes away our pleasure in doing so or answering questions like that. Please read that help article and read the 10pts must principle.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now