CSS Form Elements

Last Updated: April 16, 2022

Form elements can be styled with CSS to get a better look

Text Input Controls

To style the input box you can use the following CSS

input[type=text]{
  width: 300px;
  padding: 5px;
  border: 1px solid #ccc;
}

How to increase the height of the text box control?

Change the height and font-size CSS property

<input style="height:50px;font-size:30px;" type="text">

Checkboxes Controls

<input type="checkbox" name="checkbox" class="red-checkbox" />

You can not change the size of the checkbox with CSS. You can only label associated with the check box.

If you need to add styles to the checkbox you can create custom checkbox controls.

But you can use accent-color property

.red-checkbox {
    accent-color: #9d3039;
    height: 30px; /* not needed */
    width: 30px; /* not needed */
}
Red Checkbox

Radio Box Controls

.red-radio {
    accent-color: #9d3039;
    height: 30px; /* not needed */
    width: 30px; /* not needed */
}
Radio Button

Select Box Controls

To remove arrow from the selectbox you can use following style

.select-style {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;  
}

Custom arrow images can be applied with

background-image: url(...);

File Select boxes

You can use the following CSS selector

input[type="file"] {
    border: 1px solid #ccc;
    display: inline-block;
}

See the Pen Registration Form in HTML and CSS by rajeshdn (@RajRajeshDn) on CodePen.

 
Test