이 글에서는 특정 참조 가치가 있는 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를 사용하여 녹색 체크박스 버튼 스타일을 맞춤설정하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!