통합검색

HTML/CSS

input checkbox radio

  • 2024.06.18 12:54:59
[!]html[/!]
 
<div class="labskin"><input type="radio" name="_rad" id="_rad1_1"><label for="_rad1_1">KOR</label></div>



[!]css[/!]
.labs {display: flex;flex-wrap: wrap;margin: -5px -10px;}
.labs .labskin {margin: 5px 10px;}
.labskin {position: relative;}
.labskin input {position: absolute;top: 0;left: 0;opacity: 0;}
.labskin label {font-size: 17px;color: #555555;letter-spacing: -1px;line-height: 22px;}
.labskin input[type=checkbox] + label {padding-left: 20px;position: relative;}
.labskin input[type=checkbox] + label:after {display: block;content: '';width: 15px;height: 15px;box-sizing: border-box;border: 1px solid #ccc;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
.labskin input[type=checkbox]:checked + label:after {border-color: var(--color);content: '\e116';font-family: 'axicon';font-size: 12px;color: var(--color);text-align: center;line-height: 13px;text-indent: -1px;}
.labskin input[type=radio] + label {padding-left: 20px;position: relative;}
.labskin input[type=radio] + label:after {display: block;content: '';width: 15px;height: 15px;box-sizing: border-box;border: 1px solid #ccc;position: absolute;top: 50%;left: 0;transform: translateY(-50%);border-radius: 50%;}
.labskin input[type=radio]:checked + label:after {border-color: var(--color);}
.labskin input[type=radio]:checked + label:before {display: block;content: '';width: 7px;height: 7px;position: absolute;top: 50%;left: 4px;transform: translateY(-50%);border-radius: 50%;background: var(--color);}