How to Select Input By Type and Name Using CSS

Last Updated on January 24, 2021 by Roshan Parihar

In this tutorial, learn how to select input by type and name in CSS. The short answer is to use the selector input[type="name"] where name should change with the input type as given here.

Let’s find out how to select input by type with the examples given below.

Select Input type = "text" in CSS

To select the input type text in CSS, you have to use the selector input[type="text"] followed by the CSS properties defined inside the curly brackets {}.

Output

The above example shows that the border and the color of the <input> change to the specified values. You can apply as many CSS of your choice as per your requirements.

Get Button Element with type = "button" to Add CSS

To select the button type input in CSS, you have to use the selector input[type="button"]. It can be useful to add any type of CSS to the button elements.

Output

The above example adds background and color to the button element using CSS. However, you can also apply the other CSS properties to apply other effects that can attract your users to click the button.

Select Input type = "checkbox" in CSS

You have to use the selector input[type="checkbox"] and add the CSS properties as specified in the example below.

We cannot apply background, color, border, and other CSS properties to checkboxes that can change the appearance of other input elements. But, you can apply CSS like the cursor to the checkbox element.

Output

Male
Female

You can mouse hover over the above checkbox elements to see how the cursor changes to a pointer. The mouse pointer changes to a hand that points to the checkboxes.

Select Input type = "email" in CSS

To apply CSS to the input type email element, you have to use the selector input[type="email"] followed by the curly brackets {}. Inside the curly brackets, you add as many CSS as you want to change the appearance of the element.

Output

The above example contains the input type email element with applied border and color CSS. The border CSS property applies a border to the input element and color applies a color to the text content of the input element.

Get Input type = "radio" in CSS

You have to use the selector input[type="radio"] to specify the CSS properties to the input type radio elements.

However, the CSS works the same as the checkboxes as you cannot apply background, color, border, and other CSS properties to the radio input element. You have to wrap them inside the div element and apply CSS to the div element to change the appearance of input type radio elements. But, it is possible to apply CSS like the cursor to the radio element.

Output

Male
Female

When your mouse hovers over the above radio elements, the pointer of the mouse changes to a hand same that points to the element.

Get type = "submit" to Apply CSS

You can also change the appearance of a button element using the selector input[type="submit"] followed by the curly brackets {}. Add as many CSS as you want inside the curly brackets to change the look and feel of the button.

Output

The output of the above example contains the input type submit button element with a red background and white color text content. You can apply other CSS properties to match the button with your website theme color.

• CSS Attribute Selector
• How to Align Text Vertically Center Using CSS
• Add Shadow Effect to Div Element Using CSS