Hacker News Reader

Comment by progval | Hacker News Reader

Also, it uses this instead of <select>:

            <div class="menu" tabindex="-1">
              <div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
              <div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
              <div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>

View on HN

`<select>`s aren't styleable so you have to do a select proxy.

They are, to some extent at least, depending on what browsers you need to support. You have to set *-appearance: none and build the styles back up.

Thanks! More info for others: http://stackoverflow.com/questions/1895476/how-to-style-a-se...

Look at the second example:

https://semantic-ui.com/modules/dropdown.html#selection

Unfortunately there are some severe limitations of using native select, in particular in relation to list item (i.e. option element)

- Can't have anything but plain text: (e.g. no images, bold text etc)

- Can't have a line-break, or somehow wrap text into a 2nd line if entry is too long

Reply on news.ycombinator.com