CSS form style: The comprehensive guide for the beginners

A big part of our work as website designers is the ability to make things look good and function well. The forms are no exception. Forms, in general, should be beautiful, easy to use, and should look consistent with the rest of our website. This is quite easy when we know how to use CSS form style. You just need to know what each tag does, and how to style it so that it looks good on your site.

CSS form styling: A complete guide
CSS form styling: A complete guide

Before we dive in, it’s important to understand that there is no specific style for forms. The possibilities are limited only by your imagination. This guide is meant to help you get started on the path to creating your own unique designs with CSS. So in this tutorial, we – ArrowHiTech would like to show you guys the guide of css form style, so you – as a beginner – should be able to do it by yourself. Let’s go!

Step #1. Setting box-sizing

This set-up is used not only for forms but also for webpages. When you set it, the width of all the elements will contain the padding. Without box-sizing:border-box will have a width of more than the width you set up, this can be an issue. That’s why most developers use border-box for all elements. So, you should set this up like this, which also supports the :before and :after pseudo-elements.

*, *:before, *:after {
  box-sizing: border-box;
}

Step #2. css form style selectors for form elements

The easiest way to select input elements is to use CSS attribute selectors. These selectors will select all the input elements in the document. If you need to specify any selectors, you’ll need to add classes to the elements. This should go something a little bit like the coding below:

input[type=text] {
  // input elements with type="text" attribute
}
input[type=password] {
  // input elements with type="password" attribute
}

And then:

<input type="text" class="signup-text-input" />

After that:

.signup-text-input {
   // styles here
}

Step #3. Basic css form style method for single-line input fields

Single-line fields are the most common input fields used in forms. Usually, single-line text input is a simple box with a border, yet it depends on the browser you use. So this is an example of the HTML markup for a single-line field with a placeholder for attractive CSS form styling:

<input type="text" placeholder="Name" />

You can use the following CSS properties to make this input field more attractive.

Basic CSS form styling method for single-line input fields
Form styling sample
  • Padding: Adding some inner space to the input field can help improve clarity. You can accomplish this with the padding property.
  • Margin: If there are other elements near your input field, you may want to add a margin around it to prevent clustering.
  • Border: In most browsers, text input fields have borders, which you can customize.
  • Box shadow: You can use the CSS box-shadow property to add a drop shadow.
  • Border radius: By curving the edges of the boxes, you can significantly alter the appearance of your input fields.
  • Width: Use the width property to set the width of inputs.
  • Font: Most browsers use a different font family and size for form elements. If necessary, we can inherit the font from the document.

#4. Styling other input types

You can style other input types for the best css form style such as text area, radio button, checkbox, and more. Let’s take a closer look.

Text area

Text area CSS form styling
Text area sample

Specifically, text areas are similar to text inputs except that they allow multi-line inputs. You can use all the basic CSS properties to style text areas. The resize property is also very useful in text areas. In most browsers, text areas are resizable along both the x and y axes (value: both) by default. You can set it to both, horizontal, or vertical.

Checkbox and radio button

The default checkbox and radio buttons are hard to style and require more complex CSS and HTML – if necessary. In browsers, checkboxes are box-shaped while radio buttons are round. It’s best to keep this convention in custom inputs to avoid confusing the user. To style a checkbox for the overall css form style, use the following HTML code:

<label>Name
  <input type="checkbox" />
  <span></span>
</label>

Select menus

Select menus enable users to select an item from multiple choices. Here’s the example:

<select name="animal">
    <option value="lion">Lion</option>
    <option value="tiger">Tiger</option>
    <option value="leopard">Leopard</option>
</select>

You can style the </select> element to make it looks more engaging. Yet, you cannot style the dropdown (or <option> elements) because they are styled by default depending on the OS. The only way to style those elements for CSS form styling is to use custom dropdowns with JavaScript.

#5. UI pseudo-classes for CSS form styling

There are a lot of UI pseudo-classes suitable for form elements. We will just show you guys one of them, as for these can be used to show notices based on an element’s attributes. 

Generated messages with :required

If you remove the required attribute with JavaScript, the “Required” message will be removed automatically. To show a message that input is required, you can do something like this:

<label>Name
  <input type="text">
  <span></span>
</label>
<label>Email
  <input type="text" required>
  <span></span>
</label>


label {
  display:block;
}
input:required + span:after {
  content: "Required";
}

You can also use this for :valid and :invalid pseudo-classes.

Using :hover and :focus

:hover selects an element when the mouse pointer hovers over it. :focus selects an element when it is focused. These pseudo-classes of css form style are often used to create transitions and slight visual changes. For example, you can change the width, background color, border color, shadow strength, etc.

#6. Non-customizable inputs for CSS form styling

Styling form elements have historically been a tall order. There are some form elements that we don’t have much control over styling. These elements are provided by the browser and styled based on the OS. The only way to style these elements is to use custom controls, which are created using stylable HTML elements such as div, span, etc. Here are some of the most notable examples: 

<input type=”color”> – example of non-customizable inputs
  • <input type=”color”>
  • <input type=”file”>
  • <progress>
  • <option>, <optgroup>, <datalist>

Final words

That should be it! Here is the comprehensive guide of how to use css form style for the beginners. After all, you should now understand how to style simple form elements and how to use custom controls when browser input fields are difficult to style. Yet, this is just the beginning. You should use these tips as a foundation to let your imagination run wild. Your site in specific and your business, in general, will thank you.

More importantly, if you are seeking the support for your business, don’t forget ArrowHiTech– one of the leading IT Company in the world. ArrowHiTech’s Experts are waiting for to help you solve your problem. Let’s fill this CONTACT FORM if you have any questions. We will try our best to reply you as soon as possible.

Tags

Share