<label class="i-checks"><input type="checkbox"><i></i>Запомнить меня</label>

And the style is already applied to .i-checks i. Why apply style to I? Moreover, there is nothing inside this tag. In this case, in some way the style is applied to the Input.

  • Here you ask why you yourself inserted i inside a label?), Maybe there was supposed to be an icon or something else for something. - HamSter
  • I did not insert it, it is an example from a site which I sorted. - GuitarFan
  • one
    Probably label is a container for a switch, and i is a tick picture. - Maxim Zheleznyakov
  • one
    @MaksimZheleznyakov, the word can probably be removed :-) input type = "checkbox" is really inside the label - Grundy
  • one
    @andreymal, in general i rather like a shortcut for italic - Grundy

1 answer 1

Option 1:

 input[type="checkbox"]:checked+i { opacity: 1; } label { position: relative; } i { position: absolute; left: 6px; top: 3px; display: block; width: 8px; height: 8px; background: #000; opacity: 0; } 
 <label class="i-checks"><input type="checkbox"><i></i>Запомнить меня</label>

The i tag follows the input[type="checkbox"] to make it easier to stylize a custom (not as the developers intended, but as the designer wants) the checkbox.

Option 2:

 i { display: inline-block; vertical-align: middle; width: 8px; height: 8px; background: #000; margin: 0 10px; } 
 <label class="i-checks"><input type="checkbox"><i></i>Запомнить меня</label>

Instead of a black box, there may be an icon or any other element. Those. The i tag here is used to insert an element (most often an icon).

  • > To make it easier to stylize a custom (not as the developers intended, but as the designer wants) checkbox. How is it easier than editing the input itself? > Instead of a black box, there may be an icon or any other element. Those. The i tag here is used to insert an element (most often an icon). Is it because the image or rectangle in the input styles cannot be made or is it just more complicated? - GuitarFan
  • @GuitarFan, and at least you tried to stylize exactly input, can you make a beautiful checkbox active (: checked) and not active without an auxiliary tag (i, span, etc.)? Just try to do something like sketchapp.me/wp-content/uploads/2016/05/… for yourself . What does this one of the options <label class="i-checks"><input type="checkbox"><i></i>Запомнить меня</label> . It is possible to implement these tasks with the help of pseudo-elements. - HamSter