CSS Form
You can create attractive HTML form by using CSS.
Try Now
Try Now
Style input Fields
The Input Field width properties are used to determine the width of the input field. Let us see an example of CSS style input fields:<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
}
</style>
</head>
<body>
<p>A full-width input field:</p>
<form>
<label for="fname">Address</label>
<input type="text" id="fname" name="fname" placeholder="Enter your addresss...">
</form>
</body>
</html>
Note: If you want to style a specific input type then use attribute selectors.
- input[type=text] : You can only select text fields.
- input[type=password] : You can only select password fields.
- input[type=number] : You can only select number fields etc.
Padded inputs
This padding property is used to add space inside the text fields. The given below example of padded inputs. Exampleinput[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Bordered inputs
This bordered property is used to change the border size and color. Only you can use border property. Exampleinput[type=text] {
border: 2px solid blue;
border-radius: 6px;
}
Colored inputs
Colored inputs are used to set the background color buy using its properties ackground-color. Exampleinput[type=text] {
border: 2px solid blue;
border-radius: 6px;
}
Input with icon/image
You can use icons/image inside the input by using background-image and background-positionproperty. Colored inputs are used to set the background color buy using its properties background-color. Example<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
font-size: 16px;
background-color:white;
background-image: url('images/search-icon.PNG');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
</style>
</head>
<body>
<p>icon is used inside input</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>