Styling Select Option best practice

Question

I am working on a web page that involves a Select dropdown list. My job is to make it "functional", ie, 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".

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:

• Hide the original select element

• Use a combination of <div> <span> or <ul> <li> to simulate the native select box

• Plug-in javascript code to synchronize the data in the hidden native select box and the <div> <span> simulator.

I have to write a selenium client to test the behaviour of the web page.

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.

If I apply the styling right now, and write the selenium client to click the simulating <div><span> , 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.

I am wondering if anyone had similar experience before and what is the best practice to tackle this kind of problems.

Answer 1

I've found that you've got two options (which you've hit upon).

Minimal styling on the native component. Some browsers let you do some styling, but mainly stuff like height and width of the select box, nothing too fancy. It's probably the better choice to avoid having things break since it's native and dependent on the browser and not a plug-in.

Or you could use a plug-in as you have found that does some fancy work to create a div on top of the element. But there are a wide variety of plug-ins with varying mileage between them.

On a current project I needed a custom select box. What my script does is create a div behind the select box and turns the select box to opacity: 0. A user thinks they are clicking the fancy div but in reality are hitting the select box in front of it (even though it's not visible). When they click it it brings up the regular select dropdown list. Pretty cool. The best part is that it only uses javascript on the page load to create the div, everything else is native controls. If you need more information on this way of doing it I can provide an example, but it is something I found on the web. So perhaps you've seen it too.