Styling HTML Input Elements Using CSS Attribute Selectors

CSS3 is packed full of ways to select elements. You can select elements based on whether its class or ID starts with, contains, or ends with a string, and now you can even select different types of input elements without assigning classes or IDs!

Selecting Input Elements by Type with CSS3

Below you’ll see how to use CSS to style any of the 10 input types using attribute selectors. Attribute selectors allow you to style elements that contain a specific attribute, or as in this case, an attribute type.

Input Type Attribute Selectors

input[type=text] {
    //property: value;
}

input[type=checkbox] {
    // Text Box Properties
}

input[type=radio] {
    // Radio Button Properties
}

input[type=submit] {
    // Submit Button Properties
}

input[type=password] {
    // Password Field Properties
}

input[type=hidden] {
    // Hidden Field Properties
}

input[type=file] {
    // File Upload Properties
}

input[type=button] {
    // Button Properties
}

input[type=reset] {
    // Reset Properties
}

input[type=image] {
    // Image Properties
}

As you can see, I am simply replacing the value for the <input> element’s attribute named type in each selector with the input type I’d like to style.

About: Kurt Maine

Kurt Maine is a Full-Stack Web Developer with a passion for frontend Node.js frameworks like Angular, and backend frameworks like Ruby on Rails, and the PHP framework Symfony.


Leave a Reply

Your email address will not be published. Required fields are marked *