CodingForums.com - jquery - change backround color of html select options

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - jquery - change backround color of html select options (http://www.codingforums.com/showthread.php?t=282633)

jquery - change backround color of html select options

I have this html code

PHP Code:


		
			
<p> 

                    <label for="contact">Contact name<span class="required"> *</span></label>

                    <select name="contact" id="contact" onClick="clearSelect(this,'contact')">

                    <option value="">Select Contact</option>

                    <?php foreach ($contacts as $contact): ?>

                        <option value="<?php htmlout($contact['id']); ?>" <?php

                                if ($contact['id'] == $contactID)

                                    echo ' selected="selected"';

                                ?>><?php htmlout($contact['name']); ?></option>

                    <?php endforeach; ?>

                    </select>    

                </p>

and this jquery fuction

PHP Code:


		
			
function clearSelect(thisfield, id) {



    $j("#" + id).css("background-color","#FFF");

    $j("#" + id).css("border","1px solid #CCCCCC");

    $j("#" + id).css("color","#000000");

}

When i click the select book the background of the select box changes to white but the drop down list stays the same color untill you scroll down it.

Any ideas how to change all the option background colors to white when the select box is clicked?

Should be working for you.
I suggest you change onClick="clearSelect..... to onchange="clearSelect..... in the select tag.

First of all, this is a pretty – well – “uncommon” way to do it. Secondly, try to style the option elements rather than the select. And try to separate function and style a little more. For example, don’t change CSS with JavaScript, use JS to add a class to the element and style that class with CSS in the stylesheet.

So, for example:

Code:

function clearSelect(thisfield, id) {

    $j("#" + id).addClass('cleared');

}

Code:

.cleared {

  background-color: #FFF;

  border: 1px solid #CCCCCC;

  color: #000;

}

/* to style the option elements you can use .cleared option {…} */