Input CSS - Customizing input field styles in CSS.

Last updated : 2023-09-25

Input fields are fundamental elements in any form, whether it’s for collecting user information, allowing users to log in, or for other purposes.

This element is customizable in terms of design and style, like other HTML tags. In this article, you will learn how to customize input styles in CSS.

How to select the input element with CSS

The selector to add styles to input fields with CSS is input, and you can customize the CSS for different types of inputs either by adding classes to differentiate the elements or by accessing their attributes from CSS, as in the following code:

css

/* This line selects all input elements. */
input {
  /* ...... */
}

/* Selects all <input> elements with an attribute type set to "text". */
input[type="text"] {
}
/* Selects all <input> elements with an attribute type set to "password". */
input[type="password"] {
}

/* Selects all <input> elements with an attribute type set to "date". */
input[type="date"] {
}

/* Selects all <input> elements with an attribute type set to "datetime". */
input[type="email"] {
}
/* .................... */
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"] {
}

Example of CSS in an Input

Now, you have a small example of how to enhance the design of an input field using CSS. Keep in mind that you can experiment with styles and achieve stunning designs.

html

<div>
  <input type="text" />
  <input type="password" />
  <input type="email" />
</div>

css

input {
  border: none;
  font-size: 16px;
  height: auto;
  margin: 0;
  outline: 0;
  padding: 15px;
  width: 100%;
  background-color: #a1d1f5;
  color: #64696d;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  margin-bottom: 30px;
}

/* Only the email type field will have a different background */
input[type="email"] {
  background-color: #a1aaf5;
}

Advanced Customization of Input Fields

You can apply many other custom styles, such as shadow, rounded borders, and transition effects. Here are some examples:

Changing the Cursor Appearance

css

input[type="text"] {
  cursor: pointer;
}

This code changes the cursor appearance when hovering over the text input. In this case, the cursor transforms into a pointing hand.

Adding a transition effect.

css

input[type="text"] {
  transition: border 0.3s ease-in-out;
}

input[type="text"]:focus {
  border: 1px solid blue;
}

This code adds a smooth transition effect when focusing on the text input field. When the input is in focus, a 1-pixel solid blue border is added, and a 0.3-second transition with an ease-in-out effect is applied.

Adding a shadow to an input with CSS.

css

input[type="text"] {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* This code adds a shadow around the input */

Enhancing the appearance of inputs can improve the usability and accessibility of a website for users. Don't hesitate to experiment with different styles and designs to find the perfect solution for your webpage!

Juneiker Castillo freelance web developer

I am Juneiker Castillo, a passionate front-end web developer deeply in love with programming and creating fast, scalable, and modern websites—a JavaScript enthusiast and a React.js lover ⚛️.

About me