HTML의 checkBox 선택 스타일 설정 정보

예를 들어 테이크아웃 서비스 지역에서는 선택이 다중 선택이 되어 일반적으로 체크박스 스타일의 상자가 숨겨져 있습니다. 사용자 경험을 향상시키기 위해 선택 스타일 제어를 위해 레이블 글꼴과 설정의 외부 테두리만 남습니다.

이때 체크박스를 처리해야 합니다

제가 정리한 방법 중 하나는 selected에 따라 설정하는 것입니다

예:

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

여기서는 p 태그에 체크박스와 라벨을 작성합니다. 텍스트를 클릭하여 선택하세요.

선택 후 스타일 제어:

/*选矿*/
        .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;
        }

요약하면

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

를 사용하여 스타일을 제어한다는 것입니다.

일반 영역 선택은 사용자 경험을 개선하기 위해 클릭하면 색상이 변경되는 글꼴 상자만 남기고 체크박스 스타일을 숨깁니다.

확장:

웹페이지를 만들 때 일반적으로 필요한 사항이 있습니다. 텍스트 정보를 클릭하고 동시에 확인란을 선택하는 것입니다.

기존 방법은 텍스트에 클릭 이벤트를 추가하여 체크박스 선택

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

이것은 편리한 방법을 제공합니다:

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

입력과 레이블을 동일한 레이블 p에 넣고 동시에 레이블의 for 속성 값이 입력의 id 속성 값과 같습니다. 라벨을 클릭하는 동시에 입력을 제어할 수 있습니다

위 내용은 HTML의 checkBox 선택 스타일 설정 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!