[英]Select box arrow style
我想让第二个选择框箭头与第一个相同。 但我不知道他们为什么会有所不同,因为我没有设计箭头。
在大多数情况下,浏览器和操作系统会确定选择框的样式,而单独使用CSS几乎不可能改变它们。 你必须研究替代方法。 主要技巧是应用appearance: none
,允许您覆盖一些样式。
我最喜欢的方法是这个:
http://cssdeck.com/item/265/styling-select-box-with-css3
它不会取代操作系统选择菜单UI元素,因此与此相关的所有问题都是不存在的(无法突破浏览器窗口,其中长列表是主列表)。
祝好运 :)
对于any1使用ie8并且不想使用插件我已经做了一些灵感来自Rohit Azad和Bacotasan的博客,我只是使用JS添加了一个跨度来显示所选值。
html:
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
<span>Here is the first option</span>
</div>
css(我只使用BG的箭头,但你可以放一个完整的图像并放下定位):
.styled-select div
{
display:inline-block;
border: 1px solid darkgray;
width:100px;
background:url("/Style Library/Nifgashim/Images/drop_arrrow.png") no-repeat 10px 10px;
position:relative;
}
.styled-select div select
{
height: 30px;
width: 100px;
font-size:14px;
font-family:ariel;
-moz-opacity: 0.00;
opacity: .00;
filter: alpha(opacity=00);
}
.styled-select div span
{
position: absolute;
right: 10px;
top: 6px;
z-index: -5;
}
js:
$(".styled-select select").change(function(e){
$(".styled-select span").html($(".styled-select select").val());
});
在Firefox 39中,我发现为select元素设置边框会将箭头渲染为(2)。 没有边框设置,将箭头渲染为(1)。 我认为这是一个错误。
http://jsfiddle.net/u3cybk2q/2/检查Windows,iOS和Android(iexplorer补丁)
.styled-select select { background: transparent; width: 240px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none; } .styled-select { width: 240px; height: 34px; overflow: visible; background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF; border: 1px solid #ccc; } .styled-select select::-ms-expand { display: none; }
<div class="styled-select"> <select> <option>Here is the first option</option> <option>The second option</option> </select> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.