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

Home

Web Front-end

HTML Tutorial

About checkBox selection style setting in html

黄舟

Oct 30, 2017 am 10:24 AM

html style

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn