Javascript <;选项>;适用于firefox,但不适用于其他浏览器
html:Javascript <;选项>;适用于firefox,但不适用于其他浏览器,javascript,html,css,cross-browser,Javascript,Html,Css,Cross Browser,html: Firefox中的 铬合金 请帮帮我 UPD: -IE8与Chrome中的结果相同,可以尝试 -webkit外观:无 及 -webkit框大小:内容框 关于这个主题还有更多的讨论一些浏览器使用本机控件实现下拉菜单,并且不允许设置选项的样式。除了用一组其他元素和一堆JavaScript替换元素之外,您对此无能为力。我使用列表来完成此操作 JS: CSS: HTML: 结果: Mozilla 铬 IE8 请随意评论/CC您自己,这将从选择中删除向下箭头 <select s
Firefox中的 铬合金 请帮帮我 UPD: -IE8与Chrome中的结果相同,可以尝试
-webkit外观:无代码>
及
-webkit框大小:内容框代码>
关于这个主题还有更多的讨论一些浏览器使用本机控件实现下拉菜单,并且不允许设置选项的样式。除了用一组其他元素和一堆JavaScript替换元素之外,您对此无能为力。我使用列表来完成此操作
JS:
CSS:
HTML:
结果:
Mozilla
铬
IE8
请随意评论/CC您自己,这将从选择中删除向下箭头
<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>
.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;
}
(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");
}
}
}
.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;
}
<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>
...
$('.postCode').postcodeAddressList();
...
...
var value = $('.postCode').attr("data");
...