CSS Attribute Selector Example

There are a few ways how you can define a CSS style, and one of that is to use the attribute selector.

With attribute selector you apply the css style base on the attribute property rather than the ID or a class. Here's an example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        input[type="text"]
        {
            background-color: yellow;
            width: 100px;
            border: 2px solid green;
        }

        input[type="button"]
        {
            color: Red;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>CSS Attribute Selector Example</h1>

    <input id="text1" type="text" value="First text box" /><br /><br />
    <input id="text2" type="button" value="This is a button" /><br /><br />
    Soccer: <input id="chkValue" type="checkbox" value="Soccer" />
</body>
</html>

Here is what it looks like when the HTML page is rendered.

Comments (0)

< Prev		Next >