입력 단일 선택 및 다중 선택 스타일을 변경하는 CSS에 대한 자세한 설명

프로젝트 개발 중에 입력 단일 선택 및 다중 선택 스타일을 변경해야 하는 상황이 자주 발생합니다. 오늘은 입력 단일 선택 및 다중 선택 스타일을 변경하는 간단한 방법을 소개하겠습니다.

그 전에 :before pseudo-class

:before selector가 선택한 요소 앞에 콘텐츠를 삽입하기 전에 간단히 소개하겠습니다. 삽입할 콘텐츠를 지정하려면 콘텐츠 속성 을 사용하세요(콘텐츠 필수).

이것은 이해하기 어렵지 않다고 생각합니다. 다음으로 먼저 아이디어를 이해해 보겠습니다.

(1) 먼저 label을 사용하여 html의 입력 요소에 대한 마크를 정의합니다. 즉, 라벨을 클릭하면 해당 입력도 선택되거나 선택 해제됩니다

(2) 다음 단계는 CSS를 작성하는 것입니다. 입력을 숨기려면 라벨 앞에 스타일을 추가하면 됩니다. 그림을 그리거나 직접 그려도 됩니다. 아래 원은 제가 쓴 원입니다. 물론 배경 이미지로 대체할 수도 있습니다.

input[type="radio"]+label:before是未选中状态的样式

input[type="radio"]:checked+label:before是选中状态的样式

<input type="radio" id="nationality1"><label for="nationality1">中国</label></p>

input[type="radio"]{
    display:none;
}
input[type="radio"]+label{
    position: relative;
}
input[type="radio"]+label:before{
    content: "";
    width:25px;
    height:25px;
    background: #ffffff;
    border:2px solid $gray;
    position: absolute;
    bottom:3px;
    left: -35px;
    border-radius: 50%;
}                                                   
input[type="radio"]:checked+label:before{
    content: "";
    width: 25px;
    height: 25px;
    background: #34c0f5;
    position: absolute;
    bottom:3px;
    left: -35px;
    z-index: 99;
    border-radius: 50%;
}

여러 항목을 선택하려면 라디오를 체크박스로 바꾸세요.

참고: 숨기기 및 의사 클래스 위치 지정이 핵심입니다

위 내용은 입력 단일 선택 및 다중 선택 스타일을 변경하는 CSS에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!