<fieldset>
<label>
<input type="radio" name="contact" value="email" checked />
<span>이메일</span>
</label>
<label>
<input type="radio" name="contact" value="phone" />
<span>전화</span>
</label>
<label>
<input type="radio" name="contact" value="fax" disabled />
<span>팩스</span>
</label>
<label>
<input type="radio" name="contact" value="mail" />
<span>우편</span>
</label>
</fieldset>
label {
font-size: 18px;
line-height: 2rem;
padding: 0.2em 0.4em;
}
[type="radio"], span {
vertical-align: middle;
}
[type="radio"] {
appearance: none;
border: max(2px, 0.1em) solid gray;
border-radius: 50%;
width: 1.25em;
height: 1.25em;
transition: border 0.5s ease-in-out;
}
[type="radio"]:checked {
border: 0.4em solid tomato;
}
[type="radio"]:focus-visible {
outline-offset: max(2px, 0.1em);
outline: max(2px, 0.1em) dotted tomato;
}
[type="radio"]:hover {
box-shadow: 0 0 0 max(4px, 0.2em) lightgray;
cursor: pointer;
}
[type="radio"]:hover + span {
cursor: pointer;
}
[type="radio"]:disabled {
background-color: lightgray;
box-shadow: none;
opacity: 0.7;
cursor: not-allowed;
}
[type="radio"]:disabled + span {
opacity: 0.7;
cursor: not-allowed;
}
/* Global CSS */
fieldset {
display: flex;
justify-content: center;
border: none;
margin: 0;
padding: 40px 20px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.