CSS Forms
With CSS, an HTML form’s appearance can be significantly enhanced:
------TABLE MUKVU-------
Styling Input Fields
To find the input field’s width, use the width property:
----- BOX MUKVU -----
Example
input {
width: 100%;
}
The above example is applicable to every <input> element. Attribute selectors are useful if you just wish to style a particular kind of input:
- input[type=text] – will only select text fields
- input[type=password] – will only select password fields
- input[type=number] – will only select number fields
- etc..
Padded Inputs
To create more space inside the text box, use the padding attribute.
Advice: You may also wish to add extra margin to your inputs when they follow one another in order to create more space outside of them:
----- BOX MUKVU -----
Example
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Observe that border-box is the box-sizing property that we have selected. This ensures that the elements’ overall width and height include the padding and, eventually, borders.
See our CSS Box Sizing chapter for additional information on the box-sizing property.
Bordered Inputs
Change the border size and color with the border property, and add rounded corners with the border-radius property:
----- BOX MUKVU -----
Example
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
Use the border-bottom attribute if you just want the bottom border:
First Name
------LINE MUKVI------
Example
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
Colored Inputs
To add a backdrop color to the input and modify the text color, use the background-color and color properties, respectively:
----- BOX MUKVU -----
Example
input[type=text] {
background-color: #3CBC8D;
color: white;
}
Focused Inputs
Certain browsers automatically encircle the input in blue when it receives focus, or a click. The behavior can be eliminated by adding outline: none; to the input.
When the input field comes into focus, use the :focus selector to do something with it:
----- BOX MUKVU -----
Example
-------Example MUKVA--------
Input with icon/image
Use the background-image property and the background-position property to position an icon inside the input if desired. Observe also that we have reserved the icon’s space by providing a significant left padding:
----- BOX MUKVU -----
Example
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
Animated Search Input
In this example, when the search input gains focus, its width is animated using the CSS transition property. Later on, in our CSS Transitions chapter, you will discover more about the transition property.
----- BOX MUKVU -----
Example
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Styling Textareas
Advice: To stop textareas from resizing, use the resize attribute (disable the “grabber” in the bottom right corner):
----- BOX MUKVU -----
Example
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Styling Select Menus
----- BOX MUKVU -----
Example
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Styling Input Buttons
----- BOX MUKVU -----
Example
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
Responsive Form
To observe the effect, resize the browser window. Make the two columns stack on top of each other rather than next to each other when the screen width is less than 600 pixels.
Advanced: The next example builds a responsive form with media queries. In a subsequent chapter, this will be covered in further detail.
