Help with styling a drop-down box

I have this code (below) and I'd like to replace the 'blue' color (see attached image), can you help me with that?

input, select {
font-family:Arial, Helvetica, sans-serif;
}

input,select{
width:100px;
height: 40px;
color:#cccccc;
border:1px solid #cccccc;
background: #ffffff;
}

input:focus,select:focus{background:red}

Code (CSS):

<form method="get" action="../search1.php">
<select size="1" name="type" />
<option value="1">CHANNEL 1</option>
<option value="2">CHANNEL 2</option>
<option value="any string here">ALL</option>
</select>
<input autocomplete="off" id="keyword" name="keyword" value="Search [var.site_name]" onclick="clickclear(this, 'Enter Search Words')"   onblur="clickrecall(this,'Enter Search Words')"  />
<input type="submit" value="VIEW" />
</form>

HTML:

 

You are not going to do it with CSS. I think you might manage it with scripting for the change event of the select with

<select onchange="this.options[this.selectedIndex].style.backgroundColor:'#ff0000';"

Code (markup):

I don't guarantee it will actually let you change it cross-browser/device/os but it is probably your best shot.

 

Styling things like form elements is a nightmare across different browsers; OFFICIALLY you aren't supposed to be able to do it at all because it's usability and accessibility rubbish. SOME browsers (Firefox and other Nyetscape legacy) will let you set style on the OPTION tags, but you can't rely on it working in any other browsers.

Though it might help if you had a properly formed form and axed the scripttardery that is creating "false simplicy" just to avoid making room for a LABEL. Just as "Placeholder is not a substitute for LABEL", neither is dicking around hiding/showing what should be your LABEL inside the input.

No matter how many artsy fartsy "designers" Photoshop jockeys who don't know **** about **** when it comes to accessibility and usability might try to tell you otherwise.

 

Though (not to backpedal) I've been playing with an interesting.. idea on handling selects... by using radio buttons and their labels instead of options. When/if I get a working example I'll post it up here. It's nice because it's a HTML/CSS only solution -- no scripting needed.

 

Now you have my interest. A no script solution would make my day.

 

just put a css in your select and use it in your css.
<select css="selectCss">
...
....
</select>


.selectCss
{
color:blue;
}

 

@Naina S
Are you inventing your own attributes? Or do you think that actually exists?