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!

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.