Is it possible to style a `<select>` to behave like a vanilla `<div>`?

211 Views Asked by aaaidan At 21 October 2024 at 04:54

Is there a way to style the following markup …

<select>
  <option>Canteloupe</option>
  <option>Canteloupe</option>
  <option selected>Crabapple</option>
</select>

basic select

… so that all the options are visible at once?

I would like it to behave as though all the elements are <div>s, so I can lay out each option for a printed version of the form.

Like this:

<div>
  <div>Canteloupe</div>
  <div>Canteloupe</div>
  <div>Crabapple</div>
</div>

I have tried -webkit-appearance: none, which removes the operating system appearance, but doesn't stop the select element from hiding its non-selected <option>s.

A lot of built-in html elements can have their built in styling overridden "back to nothing", but it seems as though <select> is magic, and has user agent behaviour that can't be undone.

I don't have to support old browsers (e.g. IE11)

Original Q&A

There are 1 best solutions below

ROOT On 13 February 2020 at 19:24

For you case I think using multiple attribute would be a valid way to have all the options laid-out for printing:

#cars {
  border: 0 none;
}

<!DOCTYPE html>
<html>
<body>


<select id="cars" name="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">



</body>
</html>

Is it possible to style a `<select>` to behave like a vanilla `<div>`?

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in FORMS

Related Questions in PRINT-STYLE

Trending Questions

Popular # Hahtags

Popular Questions