Is it possible to apply grid style to select options with pure CSS?

Question

Help me please with applying display:grid style to SELECT tag with OPTIONs. I need to use pure CSS without JS.

select {
  display:grid !important;
  width:100%;
  overflow:hidden;
  border:none;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

<select multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
  <option>F</option>
</select

Thanks for any help!

You can't customize native HTML elements like `select` that much — Posandu, Nov 16 '21 at 14:31
Styling `select` is so difficult, having a grid in it I think must be very hard if possible. I you want to customize that much use `ul`/`ol` and `li`, with JavaScript to give theme a value. — Youssouf Oumar, Nov 16 '21 at 14:36

score 0 · Answer 1 · answered Nov 16 '21 at 14:33

Nope, you can't. But you can use this trick.

.my-select-box{
  display:grid !important;
  width:100%;
  overflow:hidden;
  border:none;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;  
}

<div class="my-select-box">
  <label for="option-1">
    Option 1
    <input type="checkbox" id="option-1" name="inputName[]">
  </label>
  <label for="option-2">
    Option 2
    <input type="checkbox" id="option-2" name="inputName[]">
  </label>
  <label for="option-3">
    Option 3
    <input type="checkbox" id="option-3" name="inputName[]">
  </label>
  <label for="option-4">
    Option 4
    <input type="checkbox" id="option-4" name="inputName[]">
  </label>
</div>

Is it possible to apply grid style to select options with pure CSS?

1 Answers1