CSS를 사용하여 녹색 체크박스 버튼 스타일을 맞춤설정하세요.

이 글에서는 특정 참조 가치가 있는 CSS 사용자 정의 녹색 체크박스 버튼 스타일을 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

HTML 자체 체크박스 또는 라디오 버튼 버튼 스타일은 비교적 간단합니다. 때때로 이러한 양식 컨트롤은 자신의 테마 스타일과 일치해야 할 수도 있습니다. 과거에는 JS의 도움으로 이를 달성할 수도 있습니다.

렌더링:

주제로 바로 넘어가겠습니다. 체크박스에 배경색이 필요하고 여기서는 체크박스를 사용하여 선택한 상태를 나타냅니다. HTML은

<p class="i-check">
       <input type="checkbox" value="0" />
       <label></label>
</p>

.i-check를 전체 체크박스로 간단히 표현할 수 있습니다. 추가된 CSS 코드도 간단합니다.

.i-check {   
    width: 20px;   
    height: 20px;   
    position: relative;   
    margin: 20px auto;   
}

체크박스의 크기는 필요에 따라 표시됩니다.
그런 다음 확인란의 기본 상태를 설정합니다. 높이와 너비는 .i-check 설정과 동일합니다.

.i-check label {   
   width: 20px;   
   height: 20px;   
   cursor: pointer;   
   position: absolute;   
   top: 0;   
   left: 0;   
   background: #1A9909;   
   border-radius: 4px;

이미 기본 상태를 수정했습니다. 지금 필요한 것은 선택 상태입니다. 여기서는 의사 클래스를 사용합니다. , 테두리를 설정하고 회전하면 체크 표시가 됩니다. 하지만 기본 상태 체크 표시는 숨겨져 있으므로 불투명도 0을 사용합니다.

.i-check  label:after {   
    content: '';   
    width: 9px;   
    height: 5px;   
    position: absolute;   
    top: 4px;   
    left: 4px;   
    border: 3px solid #fff;   
    border-top: none;   
    border-right: none;   
    background: transparent;   
    opacity: 0;   
    transform: rotate(-45deg);   
}

자, 이제 전체 상태가 설정되어야 합니다. 체크박스를 클릭하세요. 시간이 되면 체크 표시가 나타나도록 하세요. 다음 코드가 완성될 수 있습니다.

.i-check input[type=checkbox]:checked + label:after {   
    opacity: 1;   
}

여기에 작성되었습니다. 사용자가 클릭할 수 있도록 입력 체크박스의 스타일을 설정하는 것을 잊지 마세요. , 높이와 너비는 전체 상자의 최상위 수준에 있어야 합니다. 이렇게 하면 사용자가 이 영역의 아무 곳이나 클릭할 수 있습니다. 마지막 단계는 입력 확인란을 숨기는 것입니다. 숨기고 없애는 게 아니라 여기서 숨기려면 불투명도를 0으로 설정하면 됩니다.

.i-check input[type=checkbox] {   
    opacity: 0;   
    position: absolute;   
    z-index: 2;   
    left: 0;   
    top: 0;   
    width: 100%;   
    height: 100%;   
    margin: 0;   
}

자, 전체 효과는 동일합니다. 방법으로는 라디오 버튼의 효과를 설정할 수도 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

CSS를 사용하여 브라우저가 확대/축소될 때 배경 이미지의 크기를 변경하지 않는 코드를 구현하는 두 가지 방법

CSS 설정 방법 텍스트 글꼴 색상

CSS 이미지에서 공백 문제를 해결하는 방법

위 내용은 CSS를 사용하여 녹색 체크박스 버튼 스타일을 맞춤설정하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!