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> 
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.
<select>styling is up to the user agent and as such have varying implementations. I know that Chromium can be styled using shadow DOM using some*webkit*pseudo-elemtn selectors. You're probably best off using some third party select library that has everything covered from an accessibility standpoint as that can be tricky to get right.