StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POStyling Select Option best practice
text
Body
copied!<p>I am working on a web page that involves a Select dropdown list. My job is to make it "functional", i.e, displaying correct contents, and at the same time make it "reasonable good looking". A web designer will come later to polish the "look and feel".</p> <p>What puzzles me is that there is no good way to style Html Select element with css only. All the framework/solutions I have found involves the following:</p> <ul> <li><p>Hide the original select element</p></li> <li><p>Use a combination of <code><div> <span></code> or <code><ul> <li></code> to simulate the native select box</p></li> <li>Plug-in javascript code to synchronize the data in the hidden native select box and the <code><div> <span></code> simulator.</li> </ul> <p>I have to write a selenium client to test the behaviour of the web page. </p> <p>If I write it to test against the native select box, further styling the dropdown using the 3 steps shown above will break the test, because selenium does not allow me to click on a hidden element. </p> <p>If I apply the styling right now, and write the selenium client to click the simulating <code><div><span></code> , I am also risking a broken test in the future. because the web designer may choose a different way of styling the select box later on, and the element I am testing against today might be removed from the page. </p> <p>I am wondering if anyone had similar experience before and what is the best practice to tackle this kind of problems. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload