About checkBox selection style setting in html-HTML Tutorial-php.cn

About checkBox selection style setting in html

黄舟

Release： 2017-10-30 10:24:59

Original

5280 people have browsed it

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>

Copy after login

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;
        }

Copy after login

The summary is that I control the style through

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

Copy after login

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;

Copy after login

Here is a convenient method:

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

Copy after login

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!