html:
<select size="10" style="width: 325px; background-color: #fff;" class="postCode">
<option value="36621746_0S_F">6 Upperkirkgate Aberdeen</option>
<option value="31560744_0S_F">12A Upperkirkgate Aberdeen</option>
<option value="31560745_0S_F">12B Upperkirkgate Aberdeen</option>
<option value="36621735_0S_F">36 Upperkirkgate Aberdeen</option>
<option value="35390362_0S_F">48-58 Upperkirkgate Aberdeen</option>
</select>
Css:
.postCode {
background-color: rgba(0, 0, 0, 0);
}
.postCode option
{
background-color: rgba(0, 0, 0, 0);
background-image: url('../img/house.png');
background-repeat: no-repeat;
background-position: left top;
text-indent: 2em;
}
In Firefox
In Chrome
Please help me.
UPD: - IE8 in the same result as in Chrome
Some browsers implement drop down menus using native controls and do not allow options to be styled. Short of replacing the element with a collection of other elements and a stack of JavaScript, there is nothing you can do about this.
Maybe try
-webkit-appearance:none;
and
-webkit-box-sizing: contents-box;
There is more discussion about the subject here
I do it with lists
JS:
(function ($) {
$.fn.postcodeAddressList = function() {
this.each(function() {
var el = $(this),
li = el.find('li'),
i = li.length;
strippedList(el);
while(i--) {
$(li[i]).on("click", function(e){
strippedList(el);
$(e.currentTarget).attr("selected", "selected");
el.attr("data",$(e.currentTarget).attr("data"));
});
}
});
return this;
};
})(jQuery);
strippedList = function ( el) {
var li = el.find('li'),
i = li.length;
while(i--) {
if($( li[i] ).attr("selected")!= 'defined') {
$(li[i]).removeAttr("selected");
}
if (i%2) {
$(li[i]).attr("stripped","stripped");
}else {
$(li[i]).removeAttr("stripped");
}
}
}
CSS:
.postCode li[stripped="stripped"] {
background-color: #f5f5f5;
}
.postCode li[selected="selected"] {
background-color: #ccc;
}
.postCode li
{
background-image: url('../img/house.png');
background-repeat: no-repeat;
background-position: 5% 50%;
padding: 7px 0 7px 4em;
cursor: pointer;
font-weight: bold;
color: #333;
}
.postCode[disabled="disabled"] {
background-color: #f5f5f5;
border-color: #ddd;
cursor: not-allowed;
}
.postCode {
background-color: white;
list-style: none outside none;
margin-left: -10px;
padding: 5px 0;
width: 340px;
height: 300px;
overflow-y: auto;
border: solid 1px #CCC;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
HTML:
<ul class="postCode" data="29392449_0S_F">
<li data="26850525_898354S_F">Andrew Begg 24-26 Upperkirkgate Aberdeen</li>
<li data="31763873_0S_F" stripped="stripped">Flat 1 12 Upperkirkgate Aberdeen</li>
<li data="31763875_0S_F">Flat 1 14 Upperkirkgate Aberdeen</li>
...
</ul>
Use:
...
$('.postCode').postcodeAddressList();
...
...
var value = $('.postCode').attr("data");
...
Mozilla
Chrome
IE8
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.