Change Select List Option background colour on hover
Is it possible to change the default background color of a select list option on hover?
HTML:
-
This way we can do this with minimal changes :)
<html> <head> <style> option:hover{background-color:yellow;} </style> </head> <body> <select onfocus='this.size=10;' onblur='this.size=0;' onchange='this.size=1; this.blur();'> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> </body> </html>讨论(0) -
The problem is that even JavaScript does not see the
optionelement being hovered. This is just to put emphasis on how it's not going to be solved (any time soon at least) by using just CSS:window.onmouseover = function(e) { console.log(e.target.nodeName); }The only way to resolve this issue (besides waiting a millennia for browser vendors to fix bugs, let alone one that afflicts what you're trying to do) is to replace the drop-down menu with your own HTML/XML using JavaScript. This would likely involve the use of replacing the
selectelement with aulelement and the use of aradioinputelement perlielement.讨论(0)
加载中...
- 热议问题