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.