<fieldset>
<label>
<input type="checkbox" name="contact" value="email" checked />
<span>이메일</span>
</label>
<label>
<input type="checkbox" name="contact" value="phone" checked />
<span>전화</span>
</label>
<label>
<input type="checkbox" name="contact" value="fax" disabled />
<span>팩스</span>
</label>
<label>
<input type="checkbox" name="contact" value="mail" />
<span>우편</span>
</label>
</fieldset>
input[type="checkbox"] {
accent-color: deeppink;
width: 1em;
height: 1em;
vertical-align: middle;
}
span {
font-size: 1.2em;
vertical-align: middle;
}
fieldset {
display: flex;
gap: 1em;
border: none;
margin: 0;
}
body {
height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.