首页 文章

如何从Firefox中的select元素中删除箭头

提问于
浏览 次
167

我正在尝试使用CSS3设置 select 元素的样式 . 我玩得很好（我'm not even bothering with IE). I' m使用CSS3 appearance 属性，但出于某种原因我无法摆脱Firefox的下拉图标 .

这里's an example of what I'在做：http://jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

正如你所看到的，我并没有尝试任何花哨的东西 . 我只想删除默认样式并添加我自己的下拉箭头 . 就像我说的，在WebKit中很棒，在Firefox中并不是很好 . 显然， -moz-appearance: none 没有摆脱下拉项目 .

有任何想法吗？不，JavaScript不是一个选项

html css firefox css3

30 回答

  • 1

    好吧，我知道这个问题已经过时了，但距离赛道还有两年，而且mozilla什么都没做 .

    我想出了一个简单的解决方法 .

    这实际上剥离了firefox中选择框的所有格式，并使用您的自定义样式包围选择框周围的span元素，但是应该只应用于firefox .

    说这是你的选择菜单：

    <select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

    并且假设css类'css-select'是：

    .css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

    在firefox中，这将显示选择菜单，然后是丑陋的firefox选择箭头，然后是您自定义的好看的箭头 . 不理想 .

    现在要在firefox中进行此操作，使用类'css-select-moz'添加span元素：

    <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

    然后修复CSS以使用-moz-appearance：window隐藏mozilla的脏箭头并将自定义箭头抛出到span的类'css-select-moz'中，但只能让它显示在mozilla上，如下所示：

    .css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
}

    非常酷，只是在3小时前绊倒这个bug（我是网页设计的新手，完全是自学成才） . 然而，这个社区间接地为我提供了很多帮助，我认为这是关于我回馈的时间 .

    我只在firefox（mac）版本18，然后22（在我更新后）测试了它 .

    欢迎所有反馈 .

    回复于
  • 1

    Update: 这已在Firefox v35中修复 . 有关详细信息，请参阅full gist .

    刚想通了 how to remove the select arrow from Firefox . 诀窍是使用 -prefix-appearance ， text-indent 和 text-overflow 的混合 . 它是纯CSS，不需要额外的标记 .

    select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

    在Windows 8，Ubuntu和Mac上测试，最新版本的Firefox .

    实例：http://jsfiddle.net/joaocunha/RUEbp/1/

    更多关于这个主题：https://gist.github.com/joaocunha/6273016

    回复于
  • 2

    对我有用的技巧是使选择宽度超过100％并应用overflow：hidden

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

    这是现在隐藏FF中下拉箭头的唯一方法 .

    BTW . 如果你想要美丽的下拉菜单，请使用http://harvesthq.github.com/chosen/

    回复于
  • 0

    重要更新：

    从Firefox V35开始，外观属性现在可以使用!!

    从firefox's official release notes on V35：

    在组合框上使用-moz-appearance和none值现在删除下拉按钮（错误649849） .

    所以现在为了隐藏默认箭头 - 就像在select元素上添加以下规则一样简单：

    select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

    DEMO

    select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

    <select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>
    回复于
  • -2

    我们've found a simple and decent way to do this. It'是跨浏览器，可降级的，并且't break a form post. First set the select box' s opacity 到 0 .

    .select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

    这样你仍然可以点击它

    然后使用与选择框相同的尺寸制作div . div应位于选择框下作为背景 . 使用 { position: absolute } 和 z-index 来实现此目的 .

    .div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

    使用javascript更新div的innerHTML . 使用jQuery易于使用：

    $('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

    而已！只需设置div而不是选择框 . 我没有测试上面的代码所以你可能需要调整它 . 但希望你能得到主旨 .

    我认为这个解决方案胜过 {-webkit-appearance: none;} . 浏览器应该做的最多是与表单元素的交互，但绝对不是它们最初在页面上显示的方式，因为它打破了网站设计 .

    回复于
  • 1

    试试这种方式：

    -webkit-appearance: button;
-moz-appearance: button;

    然后，您可以使用不同的图像作为背景并放置它：

    background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;

    moz浏览器还有另一种方法：

    text-indent:10px;

    如果您选择了已定义的宽度，则此属性将按下选择区域下的默认保管箱按钮 .

    这个对我有用！ ;）

    回复于
  • 164

    虽然不是一个完整的解决方案，但我发现......

    -moz-appearance: window;

    ......在某种程度上起作用 . 您无法更改背景（-color或-image），但可以使用color：transparent呈现元素不可见 . 不完美但它是一个开始，你不需要用js 1替换系统级元素 .

    回复于
  • 0

    我想我发现解决方案与FF31兼容!!!
    以下两个选项在此链接中得到了很好的解释：
    http://www.currelis.com/hiding-select-arrow-firefox-30.html

    我使用选项1：Rodrigo-Ludgero在Github上发布了此修复程序，包括在线演示 . 我在Firefox 31.0上测试了这个演示，它似乎工作正常 . 也在Chrome和IE上测试过 . 这是html代码：

    <!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Custom Select</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="custom-select fa-caret-down">
            <select name="" id="">
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
            </select>
        </div>
    </body>
</html>

    和CSS：

    .custom-select {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 2em;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

.custom-select:hover {
    border-color: #999;
}

.custom-select:before {
    color: #333;
    display: block;
    font-family: 'FontAwesome';
    font-size: 1em;
    height: 100%;
    line-height: 2.5em;
    padding: 0 0.625em;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 1em;
    z-index: -1;
}

.custom-select select {
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    color: #333;
    display: block;
    font-size: 100%;
    line-height: normal;
    margin: 0;
    padding: .5em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select select::-ms-expand {
    display: none; /* to ie 10 */
}

.custom-select select:focus {
    outline: none;
}
/* little trick for custom select elements in mozilla firefox  17/06/2014 @rodrigoludgero */
:-moz-any(.custom-select):before {
    background-color: #fff; /* this is necessary for overcome the caret default browser */
    pointer-events: none; 
    z-index: 1; /* this is necessary for overcome the pseudo element */
}

    http://jsbin.com/pozomu/4/edit

    它对我很有用！

    回复于
  • 0

    不幸的是你 is "something fancy" . 通常情况下，它允许您设置它们的样式，以便用户查看它们习惯的OS控件 .

    在浏览器和操作系统上一致地执行此操作的唯一方法是使用JavaScript并将 select 元素替换为"DHTML"元素 .

    以下文章显示三个基于jQuery的插件，允许你这样做（它有点旧，但我现在找不到任何东西）

    http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1

    回复于
  • 1
    /* Try this in FF30+ Covers up the arrow, turns off the background */ 
/* still lets you style the border around the image and allows selection on the arrow */


@-moz-document url-prefix() {

    .yourClass select {
        text-overflow: '';
        text-indent: -1px;
        -moz-appearance: none;
        background: none;

    }

    /*fix for popup in FF30 */
    .yourClass:after {
        position: absolute;
        margin-left: -27px;
        height: 22px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        content: url('../images/yourArrow.svg');
        pointer-events: none;
        overflow: hidden;
        border-right: 1px solid #yourBorderColour;
        border-top: 1px solid #yourBorderColour;
        border-bottom: 1px solid #yourBorderColour; 
    }
}
    回复于
  • 76

    我正在设计选择就像这样

    <select style="     -moz-appearance: radio-container;
                -webkit-appearance: none;
                 appearance: none;
">

    在我测试的所有版本中，它适用于FF，Safari和Chrome .

    在IE中我放了：

    select::-ms-expand {
 display: none;
}
/*to remove in all selects*/

    你也可以：.yourclass :: - ms-expand {display：none; } .ourourid :: - ms-exapan {display：none; }

    回复于
  • 0

    我知道这个问题有点旧，但是因为它出现在google上，这是一个“新”的解决方案：

    appearance: normal 似乎在我的Firefox中运行良好（现在版本5） . 但不是在Opera和IE8 / 9中

    作为Opera和IE9的解决方法，我使用 :before 伪选择器创建一个新的白框并将其放在箭头顶部 .

    不幸的是，在IE8中这不起作用 . 盒子是正确渲染的，但箭头只是伸出来......： - /

    使用 select:before 在Opera中运行正常，但在IE中运行不正常 . 如果我查看开发人员工具，我会看到它正确地阅读规则，然后忽略它们（它们被划掉了） . 所以我在 <select> 周围使用 <span class="selectwrap"> .

    select {
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
  content: "";
  height: 0;
  width: 0;
  border: .9em solid red;
  background-color: red;
  position: absolute;
  right: -.1em;
  z-index: 42;
}

    您可能需要稍微调整一下，但这对我有用！

    Disclaimer: 我'm using this to get a good looking hardcopy of a webpage with forms so I don' t需要创建第二页 . 我不是一个1337 haxx0r谁想要红色滚动条， <marquee> 标签，以及诸如此类:-)请 do not 将过多的样式应用于表单，除非你有充分的理由 .

    回复于
  • 0

    使用 pointer-events 属性 .

    这里的想法是在原生下拉箭头上覆盖一个元素（以创建我们的自定义），然后禁止在其上的指针事件 . [见this post]

    这是一个使用此方法的工作 FIDDLE .

    另外，在this SO answer中，我更详细地讨论了这个和另一种方法 .

    回复于
  • 2

    这适用（在Firefox 23.0.1上测试）：

    select {
    -moz-appearance: radio-container;
}
    回复于
  • 0

    Build 在@JoãoCunha的答案之上，这是一种对多个浏览器有用的css样式

    select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
    display: none;
}
    回复于
  • 2

    继Joao Cunha's answer之后，这个问题现在是on Mozilla's ToDo List并且针对第35版 .

    对于那些渴望的人来说，这里有一个Todd Parker的解决方法，在Cunha的博客上引用，今天有效：

    http://jsfiddle.net/xvushd7x/

    HTML:

    <label class="wrapper">This label wraps the select
    <div class="button custom-select ff-hack">
        <select>
            <option>Apples</option>
            <option>Bananas</option>
            <option>Grapes</option>
            <option>Oranges</option>
            <option>A very long option name to test wrapping</option>
        </select>
    </div>
</label>

    CSS:

    /* Label styles: style as needed */
label {
  display:block;
  margin-top:2em;
  font-size: 0.9em;
  color:#777;
}

/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
  position: relative;
  display:block;
  margin-top:0.5em;
  padding:0;
}

/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
  border: 1px solid #bbb;
  border-radius: .3em;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  background: #f3f3f3; /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
  width:100%;
  margin:0;
  background:none;
  border: 1px solid transparent;
  outline: none;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Remove select styling */
  appearance: none;
  -webkit-appearance: none;
  /* Font size must the 16px or larger to prevent iOS page zoom on focus */
  font-size:16px;
  /* General select styles: change as needed */
  font-family: helvetica, sans-serif;
  font-weight: bold;
  color: #444;
  padding: .6em 1.9em .5em .8em;
  line-height:1.3;
}


/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */

.custom-select::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  top: 50%;
  right: 1em;
  margin-top:-4px;
  background-image: url(http://filamentgroup.com/files/select-arrow.png);
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 2;
  /* These hacks make the select behind the arrow clickable in some browsers */
  pointer-events:none;
}


/* Hover style */
.custom-select:hover {
  border:1px solid #888;
}

/* Focus style */
.custom-select select:focus {
  outline:none;
  box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
  background-color:transparent;
  color: #222;
  border:1px solid #aaa;
}

/* Set options to normal weight */
.custom-select option {
  font-weight:normal;
}
    回复于
  • 4

    自从您在代码中编写的Firefox 35“ -moz-appearance:none ”之后，最终会根据需要删除箭头按钮 .

    自那个版本以来，这是一个bug解决了 .

    回复于
  • 0

    很多讨论在这里和那里发生，但我没有看到这个问题的一些正确的解决方案 . 最后编写一个小的Jquery CSS代码，用于在IE和Firefox上执行此HACK .

    使用Jquery计算元素宽度（SELECT元素） . 在Select元素周围添加包装并为此元素隐藏溢出 . 确保此包装的宽度为appox . 比SELECT Element低25px . 这可以通过Jquery轻松完成 . 所以现在我们的图标已经消失了......！现在是时候在SELECT元素上添加我们的图像图标了...... !!!只需添加一些简单的线条来添加背景，你就完成了.. !!确保使用隐藏的外包装溢出，

    这是为Drupal完成的代码示例 . 但是也可以通过删除Drupal Specific的几行代码来用于其他代码 .

    /*
 * Jquery Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */
(function($) {
  Drupal.behaviors.nwsJS = {
    attach: function(context, settings) {
      $('.form-select').once('nws-arrow', function() {
        $wrap_width = $(this).outerWidth();
        $element_width = $wrap_width + 20;
        $(this).css('width', $element_width);
        $(this).wrap('<div class="nws-select"></div>');
        $(this).parent('.nws-select').css('width', $wrap_width);
      });
    }
  };
})(jQuery);

    /*
 * CSS Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */

.nws-select {
  border: 1px solid #ccc;
  overflow: hidden;
  background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
  border: none;
  background: transparent;
}

    解决方案适用于所有浏览器IE，Chrome和Firefox无需使用CSS添加固定宽度黑客 . 它都是使用JQuery动态处理的 .

    更多描述于： - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

    回复于
  • 0

    CSS3的 appearance 属性不允许 none 值 . 看看the W3C reference . 所以，你想要做的事情也不会接受 .

    然后不幸的是我们真的没有任何跨浏览器的解决方案来隐藏使用纯CSS的箭头 . 如上所述，您将需要JavaScript .

    我建议你考虑使用selectBox jQuery plugin . 它非常轻巧，做得很好 .

    回复于
  • 20

    您可以增加框的宽度并将箭头移近箭头的左侧 . 然后，这允许您用空的白色div覆盖箭头 .

    看看：http://jsbin.com/aniyu4/86/edit

    回复于
  • 1

    你会接受对html的微小改动吗？

    像放置包含select标签的div标签之类的东西 .

    Take a look.

    回复于
  • 0

    或者，您可以剪辑选择 . 有点像：

    select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

    这应该剪掉选择框右侧的30px，剥去箭头 . 现在提供一个170px的背景图像和voila，样式选择

    回复于
  • 1

    这是一个巨大的黑客，但 -moz-appearance: menulist-text 可能会做到这一点 .

    回复于
  • 6

    我遇到了同样的问题 . 它很容易在FF和Chrome上运行，但在IE（我们需要支持的8个）上，事情变得复杂了 . 我能找到的最简单的解决方案，包括IE8在内的自定义选择元素"everywhere I tried"正在使用.customSelect()

    回复于
  • 26

    对我来说一个有用的黑客是将（选择）显示设置为 inline-flex . 从我的选择按钮中删除箭头 . 没有所有添加的代码 .

    • 仅限Fx . -webkit appearance 仍然需要Chrome等...
    回复于
  • 59

    Jordan Young的答案是最好的 . 但是，如果您不能或不想更改HTML，您可以考虑删除自定义向下箭头服务于Chrome，Safari等，并留下firefox的默认箭头 - 但没有产生双箭头 . 不理想，但一个很好的快速修复，不添加任何HTML，不会损害您在其他浏览器中的自定义外观 .

    <select>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

    CSS：

    select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
  select {
    background-image: none;
  }
}
    回复于
  • 0

    hackity hack ...这个解决方案适用于我测试的每个浏览器（Safari，Firefox，Chrome） . 不要有任何IE，所以如果你可以测试和评论会很好：

    <div class="wrapper">
  <select>
    <option>123456789</option>
    <option>234567890</option>
  </select>
</div>

    CSS，带有url编码的图像：

    .wrapper { position:relative; width:200px; }
.wrapper:after {
  content:"";
  display: block;
  position: absolute;
  top:1px; height:28px;
  right:1px; width:16px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);

  pointer-events: none;
}

select {
  width: 100%;
  padding:3px;
  margin: 0;
  border-radius: 0;
  border:1px solid black;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  float:none!important;
  background:white;

  font-size:13px;
  line-height: 1em;
  height: 30px;
  padding:6px 20px 6px 10px;
}

    http://codepen.io/anon/pen/myPEBy

    我支持：之后，我需要一个包装器来使用 . 现在，如果你点击箭头，下拉列表将不会注册它...除非你的浏览器支持 pointer-events: none ，除IE10以外的所有人都这样做：http://caniuse.com/#feat=pointer-events

    所以对我来说它是完美的 - 一个漂亮，干净，低头痛的解决方案，至少与包括javascript在内的所有其他选项相比 .

    tl;dr:

    如果IE10（或更低）用户单击箭头，它将无法正常工作 . 对我来说效果够好......

    回复于
  • 14

    如果你不介意摆弄JS，我写了一个小jQuery插件，可以帮助你做到这一点 . 有了它，您无需担心供应商前缀 .

    $.fn.magicSelectBox = function() {
  var $e = this;

  $e.each(function() {
    var $select = $(this);

    var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
    var $innermagicbox = $('<div></div>').css({
      position: 'relative',
      height: '100%'
    });
    var $text = $('<span></span>').css({
      position: 'absolute'
    }).text($select.find("option:selected").text());

    $select.attr('class', null).css({
      width: '100%',
      height: '100%',
      opacity: 0,
      position: 'absolute'
    }).on('change', function() {
      $text.text($select.find("option:selected").text());
    });

    $select.parent().append($magicbox);
    $innermagicbox.append($text, $select);
    $magicbox.append($innermagicbox);
  });

  return $e;
};

    在这里小提琴：JS Fiddle

    条件是你必须从头开始选择样式（这意味着设置背景和边框），但你可能还是想这样做 .

    此外，由于该函数用div替换原始选择，您将丢失直接在CSS中的选择选择器上完成的任何样式 . 因此，给select元素一个类并设置类的样式 .

    支持大多数现代浏览器，如果你想要使用旧版本的浏览器，你可以尝试使用旧版本的jQuery，但可能必须用函数中的bind（）替换on（）（未测试）

    回复于
  • 1

    试试这个css

    select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
}

    它的工作

    回复于
  • 0

    其他答案似乎对我没有用，但我发现了这个黑客 . 这对我有用（2014年7月）

    select {
-moz-appearance: textfield !important;
    }

    在我的情况下，我也有一个woocommerce输入字段，所以我用这个

    .woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
 }

    更新了我的答案，显示选择而不是输入

    回复于

相关问题