Attribute Selectors for form controls : attribute selector « Style Basics « HTML / CSS

Attribute Selectors for form controls


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
        <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;

        <title>Feedback Form - Widgets and What's-its</title>
        <h1>Widgets and What's-its</h1>
            <h2>Tell us what's on your mind..</h2>
                <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>


Related examples in the same category

1.A blockquote with a cite attribute displayed with CSS
2.p[title] selects all paragraphs containing a title attribute.
3.p[title~="paragraph"] selects all paragraphs with a title attribute containing the word, paragraph.
4.Matches are case sensitive and must match letter-for-letter including whitespace
5.p[title="myPara"] selects all paragraphs with a title attribute containing the exact text, myPara
6.Attribute Substring Selectors
7.Attribute Substring Selectors: a[href^="ftp://"]
8.Attribute Substring Selectors: a[href*="#"]
9.Attribute Substring Selectors: a[href$=".html"]
10.Attribute Substring Selectors: a[href$=".pdf"]