[Html] 如何從Firefox中的select元素中刪除箭頭


Answers

更新:這已在Firefox v35中修復。 詳情請參閱完整要點

只是想出瞭如何從Firefox中刪除選擇箭頭 。 訣竅是使用-prefix-appearancetext-indenttext-overflow 。 它是純CSS,不需要額外的標記。

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

在Windows 8,Ubuntu和Mac上測試最新版本的Firefox。

現場示例: http://jsfiddle.net/joaocunha/RUEbp/1/ : http://jsfiddle.net/joaocunha/RUEbp/1/

更多關於這個問題: https//gist.github.com/joaocunha/6273016

Question

我正在嘗試使用CSS3設計一個select元素。 我在WebKit(Chrome / Safari)中獲得了我期望的結果,但Firefox並沒有很好地發揮作用(我甚至不用IE來打擾)。 我使用CSS3 appearance屬性,但出於某種原因,我無法將Firefox中的下拉圖標甩掉。

以下是我正在做的一個例子: http://jsbin.com/aniyu4/2/edit : 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不是一種選擇




除了Joao Cunha的回答 ,這個問題現在出現在Mozilla的ToDo列表中 ,目標是35版本。

對於那些渴望,這裡是托德帕克的解決方法,在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;
}



If you don't mind fiddling with JS, I wrote a small jQuery plugin that helps you do it. With it you don't need to worry about vendor prefixes.

 $.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;
};

Fiddle here: JS Fiddle

The condition is that you have to style the select from scratch (this means setting the background and border), but you probably want to do this anyway.

Also since the function substitutes the original select with a div, you will lose any styling done directly on the select selector in your CSS. So give the select element a class and style the class.

Supports most modern browsers, if you want to target older browsers, you can try an older version of jQuery, but perhaps have to replace on() with bind() in the function (not tested)




試試這種方式:

-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;

如果您選擇了一個定義的寬度,則此屬性將推動選定區域下的默認保存框按鈕。

這個對我有用! ;)




The other answers didn't seem to work for me, but I found this hack. This worked for me (July 2014)

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

In my case, I also had a woocommerce input field so I used this

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

Updated my answer to show select rather than input




/* 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; 
    }
}



或者,您可以剪輯選擇。 沿著以下方向的東西:

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

這應該剪切選擇框右側30px,剝去箭頭。 現在提供一個170px的背景圖像和瞧,風格選擇







喬丹楊的答案是最好的。 但是,如果你不能或不想改變你的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;
  }
}



重要更新:

從Firefox V35起,外觀屬性現在可用!

firefox官方發布的V35版本說明

在組合框中使用-moz-appearancenone值現在刪除下拉按鈕(錯誤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>




我遇到了同樣的問題。 在FF和Chrome上工作很容易,但在IE(我們需要支持的8+)上,事情變得複雜。 我可以找到自定義選擇元素的最簡單的解決方案,這些解決方案“我在任何地方嘗試過”,包括IE8,都使用.customSelect()




很多討論發生在這里和那裡,但我沒有看到這個問題的一些適當的解決方案。 最後通過編寫一個小的Jquery + CSS代碼來在IE和Firefox上執行這個HACK。

使用Jquery計算元素寬度(SELECT元素)。 添加圍繞選擇元素的包裝並保持此元素的隱藏狀態。 確保這個包裝的寬度是appox。 小於SELECT元素的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




我知道這個問題有點老,但是因為它出現在谷歌上,這是一個“新”解決方案:

appearance: normal似乎在Firefox中appearance: normal工作(現在版本5)。 但不在Opera和IE8 / 9中

作為Opera和IE9的解決方法,我使用了:before偽選擇器:before創建一個新的白盒並將其放在箭頭的頂部。

不幸的是,在IE8中這行不通的。 該框被正確渲染,但箭頭仍然伸出...: - /

使用select:before在Opera中正常工作,但在IE中無法正常工作。 如果我查看開發人員工具,我會發現它正確讀取規則,然後忽略它們(它們被劃掉)。 所以我在實際的<select>周圍使用<span class="selectwrap"> <select>

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;
}

您可能需要稍微調整一下,但這適用於我!

免責聲明:我正在使用這個來獲得一個帶有表單的網頁的硬拷貝,所以我不需要創建第二頁。 我不是一個想要紅色滾動條, <marquee>標籤以及whatnot:的1337 haxx0r:除非有很好的理由,否則請不要將過多的樣式應用於表單。




這可以工作(在Firefox 23.0.1上測試):

select {
    -moz-appearance: radio-container;
}



我想我找到了與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

它對我很好!




Links