Property selector for option : select : Form Style HTML CSS TUTORIALS


HTML CSS TUTORIALS » Form Style » select »

 

Property selector for option


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
        <style type="text/css">
            option[value] {
                letter-spacing: 2px;    
            }
            option[value='newspaper'] {
                background: orange;    
            }
            option[value='magazine'] {
                background: red;
            }
            option[value='television'] {
                background: black;
            }
            option[value='radio'] {
                background: green;
            }
            option[value='other'] {
                background: blue;
            }
            input[name$='[name]'] {
                color: darkred;
            }
            input[name$='[email]'] {
                color: darkblue;
            }
            textarea[name$='[address]'] {
                color: purple;
            }
            textarea[name$='[message]'] {
                color: black;
            }
            select[name$='[heard]'] {
                color: darkgreen;
            }
            input[name^='feedback'], select[name^='feedback'], textarea[name^='feedback'] {
                font-weight: bold;
            }

        </style>
        <title>Feedback Form - Widgets and What's-its</title>
    </head>
    <body>
        <form>
            <div>
                <label for='feedback[heard]'>How'd you hear about us?</label>           
                <select name='feedback[heard]'>
                    <option value=''>Choose...</option>
                    <option value='newspaper'>Newspaper</option>
                    <option value='magazine'>Magazine</option>
                    <option value='television'>Television</option>
                    <option value='radio'>Radio</option>
                    <option value='other'>Other</option>
                </select>
            </div>
        </form>
    </body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Form Style
» select