프로그래밍/웹
[css] 체크박스
by 써드아이
2022. 3. 10.
/* 라운드진 체크박스 */
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;;
}