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);} |