相关疑难解决方法(0)
如何使用CSS设置<select>下拉列表的样式？
推荐指数
解决办法
查看次数
如何从下拉列表中删除默认箭头图标(选择元素)？
我想从HTML <select>元素中删除下拉箭头.例如:
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
如何在Opera,Firefox和Internet Explorer中完成？
推荐指数
解决办法
查看次数
删除IE10选择元素箭头
所以,使用Mozilla和WebKit,我有一个不错的解决方案,用一个父元素替换select盒子上的箭头appearance: none;.
在大多数情况下,我禁用了此功能.对于IE10,我实际上无法禁用它,因为我的条件注释实际上不起作用.
这是我的标记:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)]> <html class="ie10plus"> <![endif]-->
<!--[if !(IE)]><!--> <html> <!--<![endif]-->
该类ie10plus实际上并没有使它成为标记的方式.
我也觉得可能有合法的方法来替换IE中的箭头.我并不反对实际解决这个问题.appearance: none;但不起作用.那我该怎么办？
推荐指数
解决办法
查看次数
隐藏<select>元素的下拉箭头的正确"-moz-appearance"值是什么
我正在尝试<select>使用CSS 设置元素的下拉箭头,它在Chrome/Safari中完美运行:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url('./select-arrow1.png') ;
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
margin: 0;
padding-top: 2px;
padding-bottom: 2px;
width: 200px;
}
这看起来很漂亮
根据这个逻辑,我必须做的唯一让它在Firefox中工作的是添加所有-webkit-*东西-moz-*:
-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;
它适用于99%,唯一的问题是默认下拉箭头不会消失,并保持在背景图像的顶部,如此处所示
看起来-moz-appearance: button;对<select>元素不起作用.也-moz-appearance: …
推荐指数
解决办法
查看次数
在Firefox中设置选择元素的样式
我试图<select>在Firefox中打造一个风格.在铬我用它做:
-webkit-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;
但是在firefox上我似乎无法获得相同的结果
-moz-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;
有任何想法吗？谢谢.
推荐指数
解决办法
查看次数
在Firefox 22中隐藏默认选择箭头
以下是这个答案/sf/answers/1239962741/
我尝试实现相同的解决方案,但它在我的Windows 7 Firefox 22上不起作用,这就是我得到的:
select {
-moz-appearance: window;
-webkit-appearance: none;
background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
padding-right: 20px;
}
@-moz-document url-prefix() {
.wrapper {
background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
padding-right: 20px;
}
}
编辑:这是一个jsfiddle http://jsfiddle.net/TGBEZ/1/
推荐指数
解决办法
查看次数
如何在Firefox 30+中隐藏<select>箭头？
这个hack曾经在<= Firefox 29中工作以删除<select>箭头:
text-overflow: '';
text-indent: 0.01px;
-moz-appearance: none;
它不再适用于Firefox 30.箭头又回来了.
- Codepen for hack适用于Firefox 29
- 相关错误(现已在Fx 35b中修复)
有谁知道达到同样效果的方法？
注1:我对使用另一个元素覆盖箭头的解决方案或嵌套select元素并执行溢出的解决方案不感兴趣:隐藏.
注2:我尝试了所有-moz-appearance可能性.它们要么添加我无法覆盖的默认样式,要么不允许自定义样式(特别是边框和背景),或者箭头仍然可见.
更新:它在Firefox 35(目前处于测试版)中再次使用-moz-appearance: none,使其在所有最新浏览器(在IE11,Firefox 35b,Chrome 39,Safari 8 中测试)中保持一致:http://jsfiddle.net/phd5pu9x/
推荐指数
解决办法
查看次数
如何删除选择框的所有边框？
我如何删除的所有边界selectbox使用css或Jquery？
我的代码,
<select id="doctor_ch">
<option value="1" selected>One</option>
<option value="2">Two</option>
</select>
CSS
#doctor_ch{
background-color: #88AFF2;
color:#fff;
margin-top: 15px;
}
当我使用此代码时,它只会更改箭头样式.我也想删除箭头背景.如何删除它？
目前的结果,
预期结果,
我怎样才能做到这一点 ？
推荐指数
解决办法
查看次数
从禁用选择中删除向下箭头
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes" selected>Mercedes</option>
<option value="audi">Audi</option>
</select>
$('select').attr('disabled', 'disabled');
可以使用jQuery或只是Javascript或HTML删除禁用选择中的向下箭头？
推荐指数
解决办法
查看次数