Example 1: select box change options color
/*with a little bit of styling and javascript, you can have a select box with coloured options*/ /*Note that size attribute = 2 or greater plays an important role here*/ <style> select option:checked { background: #ff9500 -webkit-linear-gradient(bottom, #ff9500 0%, #ff9500 100%); } select option:hover { background: #ff9500 -webkit-linear-gradient(bottom, #ff9500 0%, #ff9500 100%); color: #fff; } select option { padding: 8px; } select { z-index: 1800; position: absolute; background: #fff; height: 33px; overflow: hidden; width: 30%; outline: none; } </style> <select id="colored_select" size="2" onclick="select_option()"> <option value="" selected>Select</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> <option value="6">Six</option> <option value="7">Seven</option> <option value="8">Eight</option> </select> <script> function select_option(){ var selectBox = document.getElementById("colored_select"); $size = selectBox.size; $set_size = 4; if ($size == $set_size) { selectBox.size = 2; selectBox.style.overflow = 'hidden'; } else { selectBox.size = $set_size; selectBox.style.height = 'auto'; selectBox.style.overflow = 'auto'; } var selectedOptionTop = selectBox.options[selectBox.selectedIndex].offsetTop; selectBox.scrollTop = selectedOptionTop; } </script>
Example 2: how to change selection color of text in css
::-moz-selection { /* Code for Firefox */ color: red; background: yellow; } ::selection { color: red; background: yellow; }
Comments
Post a Comment