I have created the following drop down list using the
<select></select> tags . The code that i used is :
<html> <body> <select name="ans" > <option> select 1</option> <option> select 2</option> </select> </body> </html> Is their a way i can change the style of the list , like the drop down arrow or the text in it .
If you want to style the Dropdown-Button you can come up with following approach. The idea is to hide the original select by lowering it's opacity to 0, but still keep its functionality. We also need a little bit JS for this (just a little bit), to change the Text-value when you change the options-value in the select.
The CSS:
.selectWrap { /* Style your own select-box here */ background: #ddd; border: 1px solid black; color: #333; /* Your new Arrow */ /* Created with the after-pseudo-element to save Markup, Styled the arrow with help of the border-trick to provide Retina-ready arrow */ &:after { border-width: 6px; border-style: solid; border-color: transparent transparent transparent #000; content: ""; right: 20px; position: absolute; top: 20px; } height: 30px; position:relative; } /* Hide the original select */ select { height: 30px; left: 0; position: absolute; top: 0; width: 100%; /* Hide the select cross-browser */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0.0; -khtml-opacity: 0.0; opacity: 0.0; } The HTML:
<div class="selectWrap"> <select> <option>one</option> <option>two</option> </select> <div class="selectText">Please choose..</div> </div> The JavaScript (jQuery):
/* Always when the option in the select is changed, change the text of our selectWrap */ $(document).ready(function () { $('.selectWrap select').on('change', function (e) { var wrap = $(e.target).parents('.selectWrap'); wrap.find('.selectedText').html(this.options[this.selectedIndex].innerHTML); }); }); 