1

我已经为我的选择框设置了样式，但我仍然可以在 Firefox 的选择框中看到箭头，我已经设置了 css：

background:transparent;
content:'';
apperiance:none;

这在 Chrome 上有效，但在 Firefox 上我仍然看到默认箭头，是否也可以在 Firefox 上删除它？

4

4 回答 4

1

这应该会删除 Chrome、Firefox、Safari 和 IE10 中选择中的箭头。

.poa-select {
  -moz-appearance: none; 
  -webkit-appearance: none;
  appearance: none;
  text-indent: .01px;
  text-overflow: "";
}
.poa-select::-ms-expand {
  display: none;
}

从这里和这里获取的想法。

于 2013-10-15T03:25:02.650 回答
0

使用该pointer-events物业。

这里的想法是在本机下拉箭头上覆盖一个元素（以创建我们的自定义箭头），然后禁止其上的指针事件。[看到这个帖子]

这是使用此方法的工作FIDDLE 。

此外，在这个 SO 答案中，我更详细地讨论了这个方法和另一种方法。

于 2013-05-29T09:08:43.010 回答
0

Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!

If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.

Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/

于 2013-05-29T08:49:30.710 回答
0

对我有用的技巧是使选择宽度超过 100% 并应用溢出：隐藏

select {
    overflow:hidden;
    width: 120%;
}

来自这里的答案：如何从 Firefox 的标签中删除箭头

于 2013-05-29T08:53:38.223 回答