Pure Semantic HTML 및 CSS를 사용하여 이미지 기반 확인란을 만드는 방법은 무엇입니까?

순수한 의미 HTML/CSS로 이미지 기반 체크박스 만들기

미리 만들어진 솔루션에 의존하는 대신 다음을 사용하여 이 기능을 구현할 수 있습니다. 순수 의미론적 HTML 및 CSS를 사용하여 CSS 작업에 대한 이해를 높입니다.

1단계: 의미론적 HTML

체크박스에 고유한 ID 속성을 정의하고

예:

<input type="checkbox">

2단계: 확인란 숨기기

CSS를 적용하여 확인란을 숨깁니다(예: display: none;.

3단계: 시각적 확인란 스타일 지정

CSS의 ::before 의사 요소를 사용하여 체크박스의 시각적 표현을 만듭니다.

label::before {
    background-image: url(unchecked.png);
}

4단계: 선택된 상태 구현

스타일 수정 확인란을 선택하면 CSS의 :checked 의사 선택기:

:checked + label::before {
    background-image: url(checked.png);
}

인접한 형제 선택기를 사용하면 숨겨진 확인란 바로 다음에 오는 레이블에만 스타일 변경 사항이 적용된다는 점을 기억하세요.

5단계: 위치, 크기 및 전환

라벨을 올바르게 배치하고 적절한 크기를 할당하고 부드러운 전환을 적용하여 사용자 경험을 향상시킵니다.

예(JavaScript Snippet ):

ul {
    list-style-type: none;
}

li {
    display: inline-block;
}

input[type="checkbox"][id^="cb"] {
    display: none;
}

label {
    border: 1px solid #fff;
    padding: 10px;
    display: block;
    position: relative;
    margin: 10px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label::before {
    background-color: white;
    color: white;
    content: " ";
    display: block;
    border-radius: 50%;
    border: 1px solid grey;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
    transform: scale(0);
}

label img {
    height: 100px;
    width: 100px;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
}

:checked+label {
    border-color: #ddd;
}

:checked+label::before {
    content: "✓";
    background-color: grey;
    transform: scale(1);
}

:checked+label img {
    transform: scale(0.9);
    box-shadow: 0 0 5px #333;
    z-index: -1;
}

위 내용은 Pure Semantic HTML 및 CSS를 사용하여 이미지 기반 확인란을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!