# Styling Input Fields in Forms

## Introduction

When designing a web form, one of the most important aspects to consider is the styling of the input fields. The styling of input fields plays a vital role in enhancing the user experience of a website or application. Using the power of CSS, we can significantly enhance the aesthetics and functionality of input fields which can boost the user experience of a website or application.

Let's check out some of the more basic ways to style input fields in forms using CSS:

## 🧷Padded Inputs

We can use the `padding` and `margin` property to **create/adjust the space in/around the input field**.

```css
input\[type=text\] {
width: 100%;
padding: 14px 10px;
margin: 12px 0;
box-sizing: border-box;
}
```

%[https://codepen.io/Rick799/pen/dyqWjmp] 

## 🧷Bordered Inputs

We can use the `border` property to **define the border size and color**, and also the `border-radius` property to **create rounded corners**.

```css
input\[type=text\] {
border: 2px solid blue;
border-radius: 10px;
}
```

%[https://codepen.io/Rick799/pen/YzOVjLN] 

## 🧷Colored Inputs

We can use the `background-color` property and the `color` property to **add a background color to the input field, and change the text color** respectively.

```css
input\[type=text\] {
background-color: #3CBC8D;
color: white;
}
```

%[https://codepen.io/Rick799/pen/ExempRx] 

## 🧷Coloured Placeholder Inputs

We can use the `placeholder` property to specify a hint/suggestion that helps in **describing the expected value in an input field**.

This suggestion is displayed till the user starts typing something in the input field. We can also change the `color` of the placeholder text.

```css
input[type=text]::placeholder {
  color: green;
  font-style: italic;
}

input[type=email]::placeholder {
  color: red;
  font-style: italic;
}
```

%[https://codepen.io/Rick799/pen/mdGwvEv] 

## 🧷Focused Inputs

We can use the `focus` [pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) to do **something with the input field when it gets *focus*** i.e. when it gets selected/when we click on the input field.

Example: adding a `background-color`, adding a `border`, changing the `width` etc.

```css
input[type=text\]:focus {
background-color: black;
}

input[type=text\]:focus {
border: 3px solid #FFC300;
}
```

%[https://codepen.io/Rick799/pen/eYLWjLw] 

## 🧷Icon and Animated Search Inputs

We can use the `background-image` property to **add an icon inside the input field**, **and adjust its size and position** with the `background-size` and `background-position` properties respectively.

Also, we use the CSS `transition` property to **animate the width of the search input when it gets focus**.

```css
input\[type=text\] {
background-image: url('selecturl.png');
background-size: 20px 20px;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 40px;
transition: width 0.5s ease-in-out;
}

input\[type=text\]:focus {
width: 100%;
}
```

%[https://codepen.io/Rick799/pen/vYzmabZ] 

## 🧷Select Menu Inputs

We can use CSS to style the select menu input field and the select option field with a `font-size` ,`padding` ,`border`, `border-radius`, and `background-color`. This can help in improving accessibility and usability, making it an important aspect of web design.

```css
select {
  width: 100%;
  font-size: 16px;
  padding: 15px 20px;
  border: 2px solid green;
  border-radius: 8px;
  background-color: #F6F6F6;
}

select option {
  font-size: 16px;
  padding: 15px;
  background-color: #F6F6F6;
}
```

%[https://codepen.io/Rick799/pen/qBMoGxW] 

## 🧷Invalid Inputs

We can use the `invalid` [pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) to **highlight field errors for the user**. This pseudo-class targets input fields that have failed validation.

Example: An email input that doesn't contain an '@'.

We can also use this to style the border or background color of the input field to indicate an error to the user.

```css
input:invalid {
border: 3px solid red;
background-color: #ffe6e6;
}
```

%[https://codepen.io/Rick799/pen/oNPwmNq] 

## **In Summary**

In this post, we explored the basic methods of styling input fields in forms using CSS. By using custom colors, fonts, and icons, you can create a visually appealing design that fits with your website or application's branding.

Improving the appearance of input fields can help users in understanding what information is expected of them and also benefits visually impaired users.

Styling input fields in forms greatly enhances the accessibility and user experience while interacting with a form.

## References

* **MDNWebDocs**
    
* **w3schools**
    

---

Thank you for taking the time to read this blog. Hope you found it informative and enjoyable!

Catch you guys on the next one. Cheers .. ✌️