CODEWITHSUNDEEP
htmlcssformsprint-style
aaaidan
aaaidan

Reputation: 7346

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

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>

desired presentation of select

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)

Upvotes: 0

Views: 233

Answers (1)

ROOT
ROOT

Reputation: 11622

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>

Upvotes: 0

Related Questions