<div class="grid">
<div>
Choose:
<div><input type="radio" name="choice" value="choice-1" id="choice-1" checked>
<label for="choice-1">Choice 1</label></div>
<div><input type="radio" name="choice" value="choice-2" id="choice-2">
<label for="choice-2">Choice 2</label></div>
<div><input type="radio" name="choice" value="choice-3" id="choice-3">
<label for="choice-3">Choice 3</label></div>
</div>
<p>... is basically the same as ...</p>
<div>
<div><label for="select-choice">Choose:</label>
<div><select name="select-choice" id="select-choice">
<option value="choice-1">Choice 1</option>
<option value="choice-2">Choice 2</option>
<option value="choice-3">Choice 3</option>
</select></div>
</div>
</div>
</div>
<div class="grid">
<div>
Choose:
<div><input type="checkbox" name="check-1" value="check-1" id="check-1" checked>
<label for="check-1">Choice 1</label></div>
<div><input type="checkbox" name="check-2" value="check-2" id="check-2">
<label for="check-2">Choice 2</label></div>
<div><input type="checkbox" name="check-3" value="check-3" id="check-3">
<label for="check-3">Choice 3</label></div>
</div>
<p>... is basically the same as ...</p>
<div>
<label for="select-choice-2">Choose:</label>
<div><select name="select-choice-2" id="select-choice-2" multiple>
<option value="choice-1">Choice 1</option>
<option value="choice-2">Choice 2</option>
<option value="choice-3">Choice 3</option>
</select></div>
</div>
</div>
I ain't telling you which to choose, just that it's interesting that you've got UI options even within native controls.
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
.grid {
display: grid;
grid-template-columns: 1fr max-content 1fr;
gap: 1rem;
justify-items: center;
align-items: center;
margin: 0 0 2rem 0;
> div {
border: 1px solid black;
padding: 2rem;
border-radius: 8px;
&:first-child {
justify-self: end;
}
&:last-child {
justify-self: start;
align-self: stretch;
display: grid;
place-items: center;
}
}
}
body,
select,
input {
font-family: Roboto, sans-serif;
}
body {
margin: 2rem;
text-align: center;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.