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.
input\[type=text\] {
width: 100%;
padding: 14px 10px;
margin: 12px 0;
box-sizing: border-box;
}
🧷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.
input\[type=text\] {
border: 2px solid blue;
border-radius: 10px;
}
🧷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.
input\[type=text\] {
background-color: #3CBC8D;
color: white;
}
🧷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.
input[type=text]::placeholder {
color: green;
font-style: italic;
}
input[type=email]::placeholder {
color: red;
font-style: italic;
}
🧷Focused Inputs
We can use the focus pseudo-class 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.
input[type=text\]:focus {
background-color: black;
}
input[type=text\]:focus {
border: 3px solid #FFC300;
}
🧷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.
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%;
}
🧷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.
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;
}
🧷Invalid Inputs
We can use the invalid pseudo-class 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.
input:invalid {
border: 3px solid red;
background-color: #ffe6e6;
}
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 .. ✌️