<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Packages

This Pen doesn't use any packages.