순수 CSS로 확인란 및 라디오 버튼을 사용자 지정하는 방법 알아보기

때로는 양식을 만들 때 확인란 및 라디오 버튼 입력을 사용하여 사용자 기본 설정, 약관 동의 또는 인구 통계 데이터를 수집해야 합니다. 체크박스나 라디오 버튼과 같은 HTML 입력 요소에는 기본 모양이 있습니다. 모양을 변경하려는 경우 CSS를 사용하여 원하는 대로 모양을 사용자 정의할 수 있습니다. 이 문서에서는 양식 또는 웹 페이지에 대한 확인란과 라디오 입력을 사용자 지정하는 방법의 샘플을 보여줍니다.

HTML 설정

우리가 스타일을 지정할 HTML 스켈레톤 코드는 기본적으로 체크박스와 라디오 버튼 모두에 대해 동일합니다.

하나를 위한 기본 컨테이너 확인란/라디오 버튼은 HTML 레이블 요소가 됩니다. 해당 레이블 내부에는 적절한 유형의 입력 요소와 요소가 선택되었는지 여부를 표시하는 범위 요소가 있습니다.

<html>
<head>
 
  <style>
	/* No CSS Here Yet. */
  </style>>
 
</head>
 <body>
   <h2>Radio Button and Checkbox CSS Example</h2>
   <label class="input">One
     <input type="radio" name="radio-example" checked="checked">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Two
     <input type="radio" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Three
     <input type="radio" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
   <h2>Checkbox Example</h2>
   <label class="input">Four
     <input type="checkbox" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
 
   <label class="input">Five
     <input type="checkbox" name="radio-example">
     <span class="checkmark fill"></span>
   </label>
   <script href="script.js"></script>
 </body>
</html>

위 마크업의 첫 번째 입력 세트는 라디오 버튼입니다. 사용자가 하나만 선택해야 하는 경우 양식에 라디오 버튼을 사용합니다. 여러 선택 중에서 선택.

두 번째 세트는 체크박스입니다. 사용자가 선택 항목 중에서 원하는 경우 여러 항목을 선택할 수 있는 경우 확인란이 사용됩니다. 또한 사용자가 동의/비동의 또는 예/아니오를 선택해야 하는 경우에도 사용됩니다.

이러한 HTML 요소에는 기본 모양이 있습니다. 사용자 정의하고 싶다면 확실히 할 수 있습니다! CSS를 사용하여 스타일을 조정할 수 있습니다.

CSS 설정

라디오 버튼이나 체크박스의 스타일을 변경하려면 다음 단계에서 문제를 분석해야 합니다.

레이블 맞춤설정
1. 표시 속성
2. 상대적 위치
3. 커서 포인터
4. 미학적으로 보기 좋게 만드는 여백 및 패딩
기본 체크박스 숨기기
1. 표시 속성
사용자 정의 체크박스가 될 컨테이너 생성
1. 높이
2. 너비
3. 배경
4. 위치 – 절대
5. 상단, 왼쪽 값 설정
마우스 오버 시 발생하는 특별한 기능 추가(예:체크박스의 배경색 변경)
상자 또는 버튼 선택 시 배경색 변경
선택하지 않은 경우 체크 표시 또는 원 숨기기
선택 시 체크 표시 또는 원 표시
체크 표시 스타일 지정
원 스타일 지정

아래 코드를 보기 전에 위의 문제를 해결하기 위한 기본 HTML과 단계별 설명을 고려하여 스스로 알아내는 것이 좋습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

솔루션 코드:

<html>
<head>
 
 <style>
  /* Customize the label (the input) */
label {
 display: block;
 position: relative;
 padding-left: 35px;
 margin-bottom: 12px;
 cursor: pointer;
 font-size: 22px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
 
/* Hide the browser's default checkbox */
label input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}
 
/* Create a custom checkbox container */
.checkmark, .link {
 position: absolute;
 top: 0;
 left: 0;
 height: 25px;
 width: 25px;
 background-color: #eee;
}
 
/* Add border radius for the radio button */
.circle {
 border-radius: 50%;
}
 
/* On mouse-over, add a background color */
label:hover input ~ .checkmark {
 background-color: #ccc;
}
 
/* When the checkbox is checked, add a blue background */
label input:checked ~ .checkmark {
 background-color: #2196F3;
}
 
/* Create the checkmark/circle (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}
 
/* Show the checkmark when checked */
label input:checked ~ .checkmark:after {
 display: block;
}
 
/* Style the checkmark */
label .checkmark:after {
 left: 10px;
 top: 3px;
 width: 5px;
 height: 15px;
 border: solid white;
 border-width: 0 3px 3px 0;
 /* always check to see if you need to use the css browser prefixes */
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
 
/* Style the radio button circle */
label .circle:after {
 width: 15px;
 height: 15px;
 /* since .circle and .checkmark are technically the same element, we have to set border none otherwise an unwanted checkmark will show up on screen */
 border: none;
 background: white;
 border-radius: 50%;
 left: 20%;
 top: 20%;
}
 
 </style>
 
</head>
 <body>
   <h2>CSS Radio Button and Checkbox Example</h2>
   <label class="input">One
     <input type="radio" name="radio-example" checked>
     <span class="checkmark circle"></span>
   </label>
 
   <label class="input">Two
     <input type="radio" name="radio-example">
     <span class="checkmark circle"></span>
   </label>
 
   <label class="input">Three
     <input type="radio" name="radio-example">
     <span class="checkmark circle"></span>
   </label>
   <h2>Checkbox Example</h2>
   <label class="input">Four
     <input type="checkbox" name="radio-example" checked>
     <span class="checkmark"></span>
   </label>
 
   <label class="input">Five
     <input type="checkbox" name="radio-example">
     <span class="checkmark"></span>
   </label>
   <label class="input">Six
     <input type="checkbox" name="radio-example">
     <span class="checkmark"></span>
   </label>
 </body>
</html>

당신은 그것을 가지고 있습니다; CSS의 라디오 버튼과 체크박스의 예. 이것은 처음에 마음을 정리하기에는 조금 어려울 수 있지만, 곧 알게 될 것입니다! 이 CSS 연습을 통과할 수 있다면 더 어려운 주제로 나아갈 준비가 된 것입니다.