如何使用CSS样式选择选项

Question

I need to style my select with css, so it looks like the image below, there is 2 things i cant figure out, when option is selected remove the classic blue background, how to indent the text, text-indent is not working for me, and how to lower the option box.

 <select name="txtCountry">
    <option>Select Country</option>
    <option value="1">Georgia</option>
    <option value="2">Afghanistan</option>
</select>

Answer 1

Select tags are near-enough impossible to customise, and are at the mercy of your browser as to how they are styled (albeit height and width).

You would be much better to construct and style your own using CSS if you are looking for a customisable option in which is cross-browser compatible.

I have used jQuery in order to complete this functionality. It also makes use of spans in order to replace the option tags, allowing for further styling (no external library needed, although there are many available):

 $('.item').hide(); $('.item').click(function () { var x = $(this).text(); $(this).siblings(".selected").text(x); $(this).slideUp().siblings(".item").slideUp(); }); $('.Drop').click(function () { $(this).parent().toggleClass("opened"); $(this).siblings(".item").slideToggle(); }); $('.selected').click(function () { $(this).parent().removeClass("opened"); $(this).siblings(".item").slideUp(); }); 

 div { height:30px; width:200px; background:lightgray; position:relative; } .item, .selected { display:block; height:30px; width:100%;position:relative; background:gray; transition:all 0.6s; line-height:30px; } .selected { background:none; display:block; } .item:hover { background:lightgray; } .Drop { position:absolute; top:0; right:0; height:100%; width:30px; background:tomato; transition:all 0.4s; transform:rotate(0deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <span class="selected">1</span> <span class="Drop"></span> <span class="item">1</span> <span class="item">2</span> <span class="item">3</span> <span class="item">4</span> <span class="item">5</span> <span class="item">6</span> </div> 

Note

This is not a finished product, but is for demo only.