Style select options to display all and appear as links?

Question

I was previously attempting to convert a style dropdown list to a standard unordered list instead, and I was able to do so, but I need any options within the dropdown to retain their values and link to those values when clicked or selected.

So, I was wondering if it's at all possible to style the select dropdown instead of converting it, so that it displays all options within it by default and they appear as though they are standard href links?

Answer 1

Selects are horrible to style, especially if you're concerned with older browsers. You can't really do anything with just CSS, at most you can do this kind of stuff

However, you can mimic the behaviour that you want... if you're willing to use Javascript, for example you could do something like this

<style>
.fake-link {
    color:#0044ff;
    text-decoration: underline;
    cursor:pointer;
}
</style>

<select onchange="location = this.options[this.selectedIndex].value;">
    <option value="#">Select a Link</option>
    <option class="fake-link" value="http://stackoverflow.com/">A fake link</option>
    <option class="fake-link" value="http://google.com">Another, another fake link</option>
</select>

It's annoying that you have to dip into Javascript to do something that sounds simple enough to do, but as far as i know, you can't do it any other way

Answer 2

Im not sure if this is what you are looking for, but hope it helps somehow. http://codepen.io/wallaceerick/pen/ctsCz

http://codepen.io/balduran/pen/CBEth