Solved

how to change the color of a text inside select box

Posted on 2009-05-18
4
439 Views
Last Modified: 2013-11-17
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
Comment
Question by:whspider
  • 3
4 Comments
 
LVL 39

Expert Comment

by:abel
Comment Utility
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
 

Author Comment

by:whspider
Comment Utility
is there any way that we get the result in all cross browsers
0
 
LVL 39

Accepted Solution

by:
abel earned 500 total points
Comment Utility
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
 
LVL 39

Expert Comment

by:abel
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…

762 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

10 Experts available now in Live!

Get 1:1 Help Now