Inputs in CSS
Inputs in CSS
In CSS, you can style HTML form inputs using various properties to make them more visually appealing and user-friendly. Here’s an example of how to style a basic HTML input using CSS:
HTML:
<input type="text" placeholder="Enter your name">
CSS:
input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
input[type="text"]:focus {
outline: none;
border-color: #5b9dd9;
box-shadow: 0px 0px 5px #5b9dd9;
}
This CSS applies the following styles to the input:
- The padding property adds padding to the input element to provide more space between the text and the border.
- The border property sets the border style, color, and width of the input element.
- The border-radius property rounds the corners of the input element to create a softer, more aesthetically pleasing effect.
- The font-size property sets the size of the text inside the input element.
The second set of CSS rules apply when the input element is focused, i.e. when the user clicks on it or tabs into it. In this case, the outline property removes the default browser outline around the element, while the border-color and box-shadow properties add a blue border and shadow effect to indicate that the input is in focus.
These are just a few examples of how to style HTML form inputs using CSS. There are many other properties you can use to further customize form inputs, such as background color, text color, and hover effects.