SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Addict dr_dumb99's Avatar
    Join Date
    Sep 2004
    Location
    Pakistan
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How To Change one List Item Font color

    Hi!
    I have followig drop down list box code.
    <select name="size">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
    <option value="5">Fifth</option>
    </select>


    1- I want to change font color of "Second" to "red" . How is it possible.
    2- I want to disable [grayed] option "Third" , so that no one can select it. But it should be visible in gray mode. How is it possible.

    Thanks in advance

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <style type="text/css">
                .disabled {
                    color: gray;
                }
                .red {
                    color: red;
                }
            </style>
            <script type="text/javascript">
                function setupCombo(cmb) {
                    if(typeof(cmb) == 'string')
                        cmb = document.getElementById(cmb);
    
                    cmb.onchange = function() {
                        if(this.options[this.selectedIndex].className == 'disabled') {
                            alert('You are unable to select this option');
                            this.selectedIndex = 0;
                        }
                    };
                }
                window.onload = function() {
                    setupCombo('test');
                };
            </script>
        </head>
        <body>
            
            <div>
                <select id="test">
                    <option value="1">First</option>
                    <option value="2" class="red">Second</option>
                    <option value="3" class="disabled">Third</option>
                    <option value="4">Fourth</option>
                    <option value="5">Fifth</option>
                </select>
            </div>
    
        </body>
    </html>



Bookmarks

Posting Permissions

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