Is there a way to style the following markup …

<select>
  <option>Canteloupe</option>
  <option>Canteloupe</option>
  <option selected>Crabapple</option>
</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)