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 and an early adopter of Node.js whose professional experience has spanned several languages and frameworks, namely Ruby on Rails, C#/VB.NET and the Symfony and Laravel PHP frameworks.

Leave a Reply

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