Custom dropdown lists (select box) in Chrome and Opera

Question

Opera

My task is to make custom selects for the site. The solution should be as versatile as possible, since the engine is rather cumbersome (moodle), and it is simply unrealistic to check the solution's performance on all possible pages of the project. Most of the ready-made solutions greatly change the initial layout of the element and for the most part are suitable for only one select on the page, and in moodle there can be up to 5 of them. I
immediately wrote this option:

//jquery
$("select").wrap('<span class="sel_wrap"></span>').wrap('<span class="sel_wrap_inner"></span>');

/*Стили*/
.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;
}

As a result, this is what happened:

I even liked it, although the drop-down list itself partially overlaps the background, but this is not essential in this case. But such a display was only in fierfox and ie. In chrome and opera it shows like this:

I can’t remove this white background in any way. Any ideas?

Answer 1

I did this, I drew a span, under the select. And the select itself was hidden through opacity. When the select was changed, the selected value was written to the span.

Answer 2

select { -webkit-appearance:none; } for Chrome

Answer 3

Have you tried "background-color: transparent"?

Answer 4

There is a cuSel jQuery plugin. It is good if you do not need to hang events on onchange and change them dynamically. Better yet, write your own bug-free plugin (and if you don't have jQuery, then write without it), the community will be grateful to you.

Answer 5

those. is this in chrome and opera will not work?

<select id="selectbox" class='ui-state-error' style="-webkit-appearance: none">
    <option style="background:url(http://artworks.arkanar.ru/upload/icons/facebook_32.png) repeat-x 0 0;">123</option>
    <option>456</option>
    <option>789</option>
</select>