Actually, I would like to write something like this:

<select> <option>Brain Reavis<br /><span>brian@thirdroute.com</span></option> ... ... </select>

and get a picture of the form:

enter image description here

Of course, I understand that this is not possible using HTML tools, of course, this is about imitating select using JavaScript.

  • Well, yes, native HTML, afaik is impossible. Create a block that is divided into sub-blocks (strange word), in which information is provided in the required format. In principle, from JS there will be only a trigger per click, which would transfer the value to the input field, the rest is solved via css. - SLy_huh
  • I don’t want to invent a bike, a ready solution - Enshtein
  • In jquery ui, there seems to be just such a "component". jqueryui.com/selectmenu/#custom_render - Sergey
  • Well, google for example custom select box template . In general, the bike is not always bad. Or just google ui template all ready, take from there select - SLy_huh
  • I share with you three resources that I focused on when developing my own select: 1. Custom Drop-Down List Styling . 2. Styling Drop Down Boxes with jQuery . 3. Styling Dark Select Dropdown With Dropkick.js . - Vadizar

1 answer 1

For some reason, html got used to the fact that there is only <select> and <option> for the layout of drop-down lists in html . However, they are almost impossible to stylize. In html5 , new elements have appeared - <details> and <summary> . Unlike the usual <select> in <details> you can make drop-down lists with your own markup and easily style them.

 html { font-family: Helvetica, Arial, sans-serif; background: #333; } #page-wrapper { width: 640px; background: #FFFFFF; padding: 1em; margin: 1em auto; border-top: 5px solid #69c773; box-shadow: 0 2px 10px rgba(0,0,0,0.8); } h2 { margin: 1em 0; font-size: 1em; } details { border-radius: 3px; background: #EEE; margin: 1em 0; } summary { background: #333; color: #FFF; border-radius: 3px; padding: 5px 10px; } /* Style the summary when details box is open */ details[open] summary { background: #69c773; color: #333; } /* Custom Markers */ #custom-marker summary { font-size: 17px; vertical-align: top; } #custom-marker summary::-webkit-details-marker { display: none; } #custom-marker summary:before { display: inline-block; width: 18px; height: 18px; margin-right: 8px; content: ""; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/treehouse-icon-sprite.png); background-repeat: no-repeat; background-position: 0 0; } #custom-marker[open] summary:before { background-position: -18px 0; } table { border: 0; width: 100%; } th, td { vertical-align: top; text-align: left; padding: 0.5em; border-bottom: 1px solid #E6E6E6; } th { width: 200px; } ul { list-style: none; margin: 0; padding: 10px; } li { display: inline; padding-right: 10px; } a { color: #08C; text-decoration: none; } 
 <div id="page-wrapper"> <h1>Details and Summary Elements Demo</h1> <h2>Example #1: Order Information</h2> <!-- Specifying an 'open' attribute will make all the content visible when the page loads --> <details> <summary>Order #24892105</summary> <table> <tr> <th scope="row">Order Date</th> <td>30th May 2003</td> </tr> <tr> <th scope="row">Order Number</th> <td>#24892105</td> </tr> <tr> <th scope="row">Courier</th> <td>Buy N Large Postal</td> </tr> <tr> <th scope="row">Shipping Address</th> <td> P. Sherman,<br> 42 Wallaby Way,<br> Sydney,<br> Australia </td> </tr> <tr> <th scope="row">Billing Address</th> <td> P. Sherman,<br> 42 Wallaby Way,<br> Sydney,<br> Australia </td> </tr> </table> </details> </div>

But the choice of the element will have to do with the use of JS. I share with you three resources that I focused on when developing my own drop-down list:

  1. Custom Drop-Down List Styling .
  2. Styling Drop Down Boxes with jQuery .
  3. Styling Dark Select Dropdown With Dropkick.js .