In front-end development, there are many times to use forms, but the original form style is very simple, many do not conform to the designer’s design, so many people use other HTML elements, to imitate form elements, such as: Using div or other elements to simulate a checkbox does not meet the HTML standard of using the correct tag.

In an HTML tag, you can use the label tag to copy or change the style of the original tag. Here are a few examples. The main purpose of this post is to try to use the correct tag to achieve a more standard HTML structure. I also want to share with you some common forms CSS pseudo-class use, but also hope that you can use other people’s components, leave an eye to look at the source code, learn how others write elegant and beautiful code.

IO /zhangzewei/…

input

The input field, as the most common form element, is also the easiest to change

Solution 1 Normal Input

Normal input box beautification

  1. You need to style the border: normal, focus, error
  2. Rounded corners can be added appropriately
  3. So label and input instead of placeholder, and label and input are in a row, because placeholder is the hint, and it’s going to be blocked by the user input, and it’s going to be in a row because you’re in the same row, and some of the hint is going to be long, and it’s going to affect the layout
  4. Padding is needed inside the input so that the text and border are spaced

Reconstruction scheme TWO Underline Input

So label is the placeholder

The scheme can also be deformed, it is not necessary to input box for a horizontal line, box can also, specific can see how the designer design, and browser compatibility is also more guaranteed

  1. Use label as placeholder with absolute positioning in the input box
  2. Use the input focus pseudo-class to change the style of the label, that is, focus, label to the top, when there is no focus, back to the original
  3. Use JS to control the style. When the input box has content, add the style and leave the label as focus

checkbox

In many cases, developers use other elements instead of the native in order to achieve designer design of checkboxes, but this scheme does not meet the standards for proper use of HTML tags.

The main use of input and label with the use, achieve the effect at the same time, meet the correct use of HTML labels, at the same time compatibility is good, three birds with one stone

Solution 1 Normal CheckBox

Modify the binding feature using the for attribute of label and the ID of input

  1. Write input and label together, and then hide the input
  2. Use the labelbefore & afterPseudo-class, restyle the check box
  3. The use of inputcheckedPseudo class that changes the labelbefore & afterstyle

Transformation Plan 2 Switch

The checkbox property is a switch, i.e. the choice of 0 or 1, so when we need some switches, we can use the checkbox to transform.

The transformation scheme is as above, but the before & After styles of label are different.

radio

Normal radio

Again, the style is copied using the Input Checked pseudo-class.

  1. Hidden input
  2. Use the labelbefore & afterMake the circle and the selected dot

select

Normal select

The select component can be stretched out using padding to make it look pretty, but the option doesn’t add much style.

Dropdown

You can do this using the checkbox + Select component, checkbox as the display component, checked state as the toggle for dropdown, and Select as the real form component to store values.

  1. Both input and SELECT in dropdown are hidden
  2. The checkbox of thecheckedPseudo class with CSS animation, make a drop down effect
  3. Modify the select value by binding click events to the option using js

Make the finishing point

In the above examples, in fact, are the use of CSS pseudo-classes to modify the original style, such benefits are:

  1. The ability to unify styles across different browsers enhances compatibility
  2. Use the correct HTML tags for presentation
  3. Can customize the style, large operation space, can meet most of the design requirements, such as: the simplest animation requirements

conclusion

When writing HTML, remember to use the correct HTML tags to express, and within the scope of ability, as far as possible to meet the design requirements, in the details, it is best to have animation modification, make the interaction more delicate.