Using Attribute Selectors to select different textfields : selector « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. selector

Using Attribute Selectors to select different textfields

  
<!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' xml:lang='en'>
    <head>
        <title>Attribute Selectors</title>
<style type='text/css'>
* {
    font: 12px sans-serif;
    padding: 5px;
    color: royalblue;
}
fieldset {
    border: 3px solid rgb(234, 234, 234);
    background: rgb(244, 244, 244);
}
label {
    display: block;
    text-align: right;
    width: 100px;
}
label, legend {
    background: gold;
    border: 1px solid rgb(75, 75, 75);
    color: rgb(75, 75, 75);
}
input[type='text'] {
    background: blue;
    color: lightblue;
    border: 3px solid lightblue;
}
input[type='text'][name='last_name'] {
    background: forestgreen;
    color: yellowgreen;
    border: 3px solid yellowgreen;
}
input[type='password'][name='password'] {
    background: crimson;
    color: pink;
    border: 3px solid pink;
}
</style>


    </head>
    <body>
        <form method='post' action='Example_3-3.html'>
            <fieldset>
                <legend>Feedback Form</legend>
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <label for='first-name'>First Name:</label>
                            </td>
                            <td>
                                <input type='text'
                                       name='first_name'
                                       id='first-name'
                                       value='Richard'
                                       size='25' />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for='last-name'>Last Name:</label>
                            </td>
                            <td>
                                <input type='text'
                                       name='last_name'
                                       id='last-name'
                                       value='York'
                                       size='25' />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for='account-password'>Password:</label>
                            </td>
                            <td>
                                <input type='password'
                                       name='password'
                                       id='account-password'
                                       size='25'
                                       value='mypass' />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </fieldset>
        </form>
    </body>
</html>








Related examples in the same category

1.Universal Selector
2.The Type Selector
3.The Class Selector
4.The ID Selector
5.The Child Selector
6.The Descendent Selector
7.The Adjacent Sibling Selector
8.Attribute Selectors
9.Using Attribute Selectors to choose anchor by link type
10.Using Attribute Selectors to choose only mailto anchor type
11.Using Attribute Selectors to choose linked file type for anchor
12.Using Attribute Selectors to choose php links
13.Using Dynamic Pseudo-Classes to change color
14.Using Dynamic Pseudo-Classes to add text decoration
15.Dynamic Pseudo-Classes: hover effect
16.Selectors and Grouping
17.Class Selectors: A class represents something that you can have more than one of.
18.chain together class names within the class attribute.
19.An id is used but once per document.
20.Universal selectors are wildcard selectors.
21.Descendant Selectors
22.Next Sibling Selectors
23.Attribute Substring Selectors
24.Pseudo-Element Selectors
25.Dynamic Pseudo-Class Selectors
26.Using Different Selectors to Apply Styles
27.First Child Pseudo-Selector
28.Before and After Pseudo Selectors
29.Selector Basics
30.Style sheet for example demonstrating adjacent sibling and child selectors
31.paragraph with id selector
32.Direct Child Selectors
33.A specific selector wins, the last one wins
34.Select one item
35.direct adjacent sibling combinator