About checkBox selection style setting in html

For example, in the takeout service area, the selection is multi-select, and the checkbox style box is generally hidden. Only the label font and the outer border of the setting are left for selection style control to improve the user experience.

At this time, the checkbox needs to be processed

One method I summarized is to set it according to checked

Example:

<p>
      <input name="area" type="checkbox" value="1" id="check1"/>
       <label for="check1">桥西区</label>
 </p>

Here I write the checkbox and label in the p tag, so that text can be selected by clicking on it.

Style control after selection:

/*选矿*/
        .select-ul li p label,
        .type-list-ul li p label{
            font-size: 0.28rem;color: #666;
            width: 100%;height: 100%;display:  inline-block;
            border-color: #666;
            border-style: solid;
            border-width: 1px;
            border-radius: 0.1rem;
        }
        .type-list-ul li p label{width: auto;padding: 0 0.1rem;}
        .select-ul li p{
            height: 0.5rem;
            width: 1.5rem;
            display: inline-block;
            line-height: 0.5rem;
        }
        .type-list-ul li p{
            /*padding: 0 0.1rem;*/
            height: 0.5rem;
            /* width: 1.5rem; */
            display: inline-block;
            line-height: 0.5rem;
        }
        .select-ul li p input[type=checkbox]:checked + label,
        .type-list-ul p input[type=checkbox]:checked + label{
            border-color: #FA8072;
            color: #FA8072;
        }

The summary is that I control the style through

 .select-ul li p input[type=checkbox]:checked + label{}

,

General area selection will hide the checkbox style, leaving only Lower the font box and change color after clicking to improve user experience

Expansion:

When making a web page, there is usually a requirement: click on a piece of text information and select a checkbox at the same time

The old method is to add a click event to this text to trigger the checkbox selection

//jq中：
//选中$("#ID").attr("checked","checked");//不选中$("#ID").removeAttr("checked");
//js中： var boxes = document.getElementsByName("test"); boxes[i].checked = true;

Here is a convenient method:

<p>
   <input name="fittype" type="checkbox" value="8" id="checkin8"/>
   <label for="checkin8">其他</label></p>

Put the input and label in the same In label p, if the value of the for attribute of label is equal to the value of the id attribute of input, you can click the label and control the input at the same time

The above is the detailed content of About checkBox selection style setting in html. For more information, please follow other related articles on the PHP Chinese website!