Custom drop down list (select box) in Chrome and Opera

0 like 0 dislike
5 views
My goal is to make custom selects for the site. The decision should be maksimalno universal, as it is quite bulky (moodle), and to test the solution on all possible pages of the project is simply unrealistic. Most ready-made solutions greatly alter the original layout of the item, and most of them are suitable for only one select on the page, but in moodle there can be up to 5.
Immediately wrote this:
//jquery $("select").wrap('').wrap(''); /*Styles*/ .sel_wrap { background: url(images/bg_buttonwrap.png) left top no-repeat; height: 24px; display: inline-block; overflow: hidden; } .sel_wrap_inner { background: url(images/bg_button_drop.png) right top no-repeat; display: inline-block; height: 24px; overflow: hidden; } select { background: none; border: none; margin: 3px -24px 0 5px; } 

In the end, that's what happened:
image
I even liked it, though he drop down the list, coming partly on the background, but this is not essential in this case. But this mapping was only in fierfox and ie. In chrome and Opera shows this:
image
This white background can not remove in any way. Any ideas?
by | 5 views

5 Answers

0 like 0 dislike
I've done that, painted the span, under select. And the select hide via opacity. When you change the select, the headline was written is selected.
by
0 like 0 dislike
select { -webkit-appearance:none; } for Chrome
by
0 like 0 dislike
"background-color: transparent" did not try?
by
0 like 0 dislike
There are jQuery plug-cuSel. It is good, if you do not need to hang on onchange event and dynamically change them. A better write bug-free your plugin (and if you don't have jQuery, then write without it), the community will thank you.
by
0 like 0 dislike
ie it is in chrome and Opera will not work?
\r
\r
by

Related questions

0 like 0 dislike
3 answers
0 like 0 dislike
7 answers
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
110,608 questions
257,186 answers
0 comments
1,134 users