상자 선택 효과를 달성하기 위한 순수 CSS

선택기 소개:

1. "+": 예를 들어 div + p는

요소 바로 뒤의 모든

요소를 선택합니다.

2. :checked: 예를 들어 input:checked는 라디오 버튼과 체크박스의 체크 상태를 나타냅니다.

(학습 영상 공유: css 영상 튜토리얼)

구현 코드:

<style type="text/css">
            .che-box {
            display:inline;
        }
        .che-box input{
            display: none;
        }
        .che-box label{
            display: inline-block;
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            padding: 3px 5px;
        }
        .che-box input:checked + label{
            border-color: #088de8;
            background: #088de8;
            color: #fff;
        }
    </style>
 
 
<div class="che-box">
        <input type="checkbox" id="che1" />
        <label for="che1">
            标签1
        </label>
    </div>
    <div class="che-box">
        <input type="checkbox" id="che2" />
        <label for="che2">
            标签2
        </label>
    </div>

구현 효과:

이 상황은 주로 type="checkbox, radio"의 사용자 정의 선택 스타일 입력에 사용됩니다. 실제 업무에서 자주 사용되는데, 모두에게 도움이 되었으면 좋겠습니다.

관련 권장 사항: CSS 튜토리얼

위 내용은 상자 선택 효과를 달성하기 위한 순수 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!