how to style an arrow od select drop down box in html?

Question

I only want to change arrow in select box with my own custom arrow without using any javascript and jquery. Any help?

Good luck with that! (Seriously; though I don't *think* it can be done (*reliably*) without JavaScript and using a native `select` element, but I'd be interested to find out I'm wrong about that!) — David Thomas, Jan 15 '13 at 16:11
Without JS? No. With a little JS? Yes. There are some CSS tricks to this, but afaik, none are 100% reliable. — Khez, Jan 15 '13 at 16:12
Duplicate question: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript — Anicho, Jan 15 '13 at 16:56

score 2 · Answer 1 · answered Aug 16 '13 at 06:51

i could not understand you clearly..

here is my thought and suggestion: html:

<div class="my_checkbox">
<input type="checkbox" value="None" id="my_checkbox" name="check">
<label for="my_checkbox"></label>
</div>

and the css:

.my_checkbox input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

for all: click me

score 1 · Answer 2 · answered Jan 15 '13 at 16:12

1

You can't. It's rendered by the OS, not the browser. There are hack work-arounds using absolute positioning but the control itself cannot be reliably styled across browsers.

answered Jan 15 '13 at 16:12

Diodeus - James MacFarlane

110,221
32
151
174

So can anyone sggest me a code by which i can implemented this in minimum required code? – Aquarius24 Jan 15 '13 at 16:13
You have not explained the desired result. – Diodeus - James MacFarlane Jan 15 '13 at 16:14
the cleanest solution would be to completely rebuild the select with javascript have a look at http://archive.plugins.jquery.com/project/jqtransform – john Smith Jan 15 '13 at 16:14

how to style an arrow od select drop down box in html?

2 Answers2