TL;DR – CSS form styling refers to adding properties to HTML forms to adjust their position, make them interactive, and improve their appearance overall.
Contents
CSS Form: Main Tips
- HTML offers user input elements such as
<form>
,<input>
,<textarea>
,<button>
,<select>
, and<option>
. - CSS form styling creates a design for these elements.
- You can animate and modify CSS forms, as well as add many styling properties to the input fields.
Styling Input Fields
Selecting Input Type
CSS attribute selectors select specific CSS input types for styling:
input[type=text]
- selects form fields that accept text.input[type=password]
- selects form fields that accept passwords.input[type=number]
- selects form fields that accept numbers.- etc.
Changing the Width
The width property lets you change the width of the input fields.
The example will apply to all the <input> elements and set their width
to 100%:
Type text here:
input {
   width: 100px; /* When specifying this, you can use both px and % */
}
Padded Inputs
The padding and margin properties add space inside and around the input field to make it more spacious.
Tip: both of these properties accept length indicators (for instance, px and em) and percentages as length values.
The example below creates space for the input field of CSS form:
Your text:
input[type=text] {
  width: 80%;
   padding: 15px 22px;
   margin: 10px 5px;
   box-sizing: border-box;
}
Note: we set the property of box-sizing to the value of border-box to include padding and borders in the total height and width of the elements.
Bordered Inputs
The border property controls the thickness, border-radius (rounded corners), style, and color of borders in CSS forms.
In the example, we add a thick purple border to the field:
Your text:
input[type=text] {
   border: 4px solid #8842d5;
   border-radius: 5px;
}
If you need to add only one, two, or three borders, you can use longhand border properties. For example, the border-bottom property adds a border at the bottom:
Your text:
input[type=text] {
   border: none;
   border-bottom: 4px solid #8842d5;
}
Colored Inputs
The background-color property adds a background inside the input field. To change the color of the text inside the field, use color.
The example below illustrates how you can color your input field:
Your text:
input[type=text] {
   background-color: #8842d5;
   color: white;
}
Focused Inputs
CSS forms and their input fields become more interactive when their styling properties change once users click on them.
Your text:
You should add the CSS pseudo class called :focus
to create a unique style for the form when it has focus.
This example changes the background color of an input field after selection:
The following example adds a border once :focus
triggers:
Note: you can remove the blue outline around the form by setting the outline property to none.
Adding an Icon or a Background Image
The background-image property adds an image to the input field.
Your text:
input[type=text] {
   background-color: #9476f7;
   background-image: url('search-icon.png');
   background-position: 9px 10px;
   background-repeat: no-repeat;
   padding-left: 50px;
}
- By adding the background-position property, you indicate the position for images. Make sure that the image fits the text field correctly.
- You should set the background-repeat to
no-repeat
to guarantee that the image appears only once.
Animated Search Input
The transition property animates the width of the input field when users click on it. To do that, we need to define the width
property twice for CSS forms.
input[type=text] {
   -webkit-transition: width 0.5s ease-in-out;
   transition: width 0.5s ease-in-out;
}
input[type=text]:focus {
   width: 80%;
}
- Set the default width of the input field for when it is inactive.
- Use the transition property and include width, the time it will take for the animation to end, and the type of animation.
- Define the
width
of the CSS form when it has:focus
. It sets how far the input field will expand once the animation triggers:
Text Areas
Properties for CSS forms can style text areas that include several lines of data as well. You can set padding, borders, width, height, and other CSS rules to design text areas neatly.
This example styles a text area and prevents users from changing its size:
textarea {
   width: 80%;
   height: 200px;
   padding: 15px 22px;
   box-sizing: border-box;
   border: 4px solid #ccc;
  border-radius: 5px;
   background-color: gray;
   resize: none;
}
Remember that the <textarea>
element is resizable by default. Users can use the grabber on the right bottom corner and change the size of the box. You can disable this feature by using the resize property set to none
.
![DataCamp DataCamp](https://assets.bitdegree.org/online-learning-platforms/storage/media/datacamp-logo-5f96bfc70113e.o.png)
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
![Udacity Udacity](https://assets.bitdegree.org/online-learning-platforms/storage/media/udacity-review-logo-small.o.png)
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
![edX edX](https://assets.bitdegree.org/online-learning-platforms/storage/media/edx-logo-60190648f3a51.o.png?tr=w-200)
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Select Menus
HTML <select> and <option> element create simple drop down menus.
This example styles the drop down menu to add backgrounds, colors, and borders:
select {
   width: 80%;
   padding: 18px 22px;
   border: none;
   border-radius: 5px;
color: white;
   background-color: #8842d5;
}
Input Buttons
An important step of CSS form styling is adjusting the way the form buttons look.
This example uses the selector of CSS input types to style all three buttons:
input[type=button], input[type=reset], input[type=submit] {
   background-color: #8842d5;
   border: none;
   color: white;
   padding: 18px 36px;
   text-decoration: none;
   margin: 5px 4px;
   cursor: pointer;
}
CSS Form: Useful Tips
- Since visitors use the input forms directly, developers need to guarantee the correct transitions and smoothness of forms in websites.
- HTML forms styled with CSS might look great, but the data provided through them needs to be validated.