Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2009
    Posts
    351
    Thanks
    75
    Thanked 0 Times in 0 Posts

    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(thisfieldid) {

        
    $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?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Should be working for you.
    I suggest you change onClick="clearSelect..... to onchange="clearSelect..... in the select tag.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    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 {…} */


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •