Custom drop-down lists (select box) in Chrome and Opera

Asked bynightfalltwen

My task is to make custom selets for the site. The solution should be maximally universal, as the engines are quite cumbersome (moodle), and it’s simply unrealistic to check the performance of the solution on all possible pages of the project. Most ready-made solutions greatly change the initial layout of the element and most of them are suitable only for one select on the page, and in a moodle there can be up to 5.
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;
}

The result was this:
image
I even liked it, though the drop-down list itself fits partially onto the background, but this is not significant in this case. But this mapping was only in fierfox and ie. In chrome and opera shows like this:
image
I can’t remove this white background. Any ideas?

Answers

greg gerrand
I did so, I painted Span, under the select. And itself hid through opacity. When changing select, the selected value was written to the list.
Replies:
Thank you, it works, there was a fuss on bringing to a normal form. - manasa kanthamneni
roisin
select {-webkit-appearance: none; } for Chrome
manami kamikawa
"background-color: transparent" did not try?
Replies:
Tried, tried the same for option (based on some logic). - amber royal
I like the way you think :) It is a pity that did not help. - raylinda
1px * 1px transparent gif: D - chris teel
Any background is drawn in chrome under the white backing, looks like a frame (if in color), including pictures. - neethu
courteney
There is a jQuery plugin cuSel. It is good if you do not need to hang events on onchange and dynamically change them. And better write your bug-free plugin (and if you do not have jQuery, write without it), the community will be grateful to you.
Replies:
In moodle, onchange almost all hangs onchange, that's why I wrote that the solution should be as universal as possible. The best solution (without jquery), by the way, I found at link, but it did not work for me. - lynda schaepfer
andy hoke
i.e. is 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>
Did you get spammed & quot; Is me Judy from (habrahabr.ru) & quot ;? :: Where to find & quot; wall of shame & quot ;? :: Flowplayer and files with Russian names? :: Example of a Qt program using QStackedWidget? :: What advise the means of auditing data changes in MSSQL?
Leave Repply forCustom drop-down lists (select box) in Chrome and Opera
Useful Links