CSS로 체크박스 스타일을 사용자 정의하는 방법은 무엇입니까? (코드 예)

CSS로 체크박스 스타일을 사용자 정의하는 방법은 무엇입니까? 이 글은 CSS를 사용하여 기본 체크박스 스타일을 수정하고 체크박스 스타일을 사용자 정의하는 방법을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 효과를 살펴보겠습니다

Principle

1. CSS3 속성 모양을 사용합니다.

이 속성(강제)은 기본(네이티브) 스타일을 변경(변경)합니다.

Firefox는 대체 -moz-appearance 속성을 지원합니다. Safari와 Chrome은 대체 -webkit-appearance 속성을 지원합니다. IE는 이 속성을 지원하지 않습니다.

따라서 이 속성을 사용하여 체크박스의 기본 스타일을 취소할 수 있습니다.

2. 사용:선택기

체크박스 선택 시 스타일을 변경합니다.

3. :after 선택기 + 콘텐츠 속성

:After 선택기는 요소 뒤에 콘텐츠를 삽입합니다.

text-aligen과 line-height를 사용하여 콘텐츠를 중앙에 배치합니다.

예제 코드:

nbsp;html>
    <meta>
    <title>checkbox</title>
    <style>
        input {
            width: 16px;
            height: 16px;
            margin-top: 0;
            background-color: #fff;            
            border: 1px solid #c9c9c9;
            border-radius: 2px;
            color: #fff;
            text-align: center;
            line-height: 15px;
            -webkit-appearance:none;
            -moz-appearance:none;
            -ms-appearance:none;
            -o-appearance:none;
            appearance:none;
            outline: none;
        }

        input:hover {
            border-color: #43adea;
        }

        input:checked {
            color: #fff;
            background-color: #43adea;
            border: 1px solid #43adea;
        }

        input:after {
            content: "✔";
        }
    </style>
    <input>
    <input>

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 CSS 비디오 튜토리얼을 방문하세요!

관련 권장 사항:

php 공공 복지 교육 비디오 튜토리얼

CSS 온라인 매뉴얼

div/css 그래픽 튜토리얼

위 내용은 CSS로 체크박스 스타일을 사용자 정의하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!