[css] 체크박스
2022. 3. 10. 22:08ㆍ프로그래밍/웹
/* 라운드진 체크박스 */
input[type="checkbox"] {
-webkit-appearance: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: 20px;
height: 20px;
cursor: pointer;
outline: none !important;
border: 2px solid #9999;
border-radius: 4px;
vertical-align: middle;
}
/* 여기가 체크표시를 위한 코드 */
input[type="checkbox"]::before {
content: "\2713";
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
transform: scale(0) translate(-50%, -50%);
line-height: 1;
}
/* 여기가 체크표시를 위한 코드 */
input[type="checkbox"]:checked {
background-color: #ff8955;
background-color: #007bff;
border-color: rgba(255, 255, 255, 0.3);
border-color: #007bff;
color: white;
}
/* 여기가 체크표시를 위한 코드 */
input[type="checkbox"]:checked::before {
border-radius: 4px;
transform: scale(1) translate(-50%, -50%)
}
/* disable된 check 색상 */
input[type="checkbox"][disabled] {
background-color: #9999;;
}
'프로그래밍 > 웹' 카테고리의 다른 글
[javascript] 체크박스 선택/해제 (0) | 2022.03.10 |
---|---|
css 선택자 (0) | 2022.03.05 |
플라스크 초기 사용법 (0) | 2020.08.22 |