html css箭頭 - 如何從Firefox中的select元素中刪除箭頭





css3 (25)


我使用的技巧是使選擇寬度超過100%,並應用溢出:隱藏

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

這是隱藏FF中下拉箭頭的唯一方法。

BTW。 如果你想美麗的下拉菜單使用Chosen

我正在嘗試使用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不是一種選擇




很多討論發生在這里和那裡,但我沒有看到這個問題的一些適當的解決方案。 最後通過編寫一個小的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




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






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

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:除非有很好的理由,否則請不要將過多的樣式應用於表單。




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

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

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




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




雖然不是一個完整的解決方案,我發現...

-moz-appearance: window;

...在一定程度上起作用。 您不能更改背景(-color或-image),但可以使用透明顏色呈現元素不可見。 不完美,但它是一個開始,你不需要用js替換系統級元素。




試試這種方式:

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

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

這個對我有用! ;)




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



我正在設計的選擇只是喜歡這個

<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; } .yourid :: - ms-exapan {display:none; }




建立在@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;
}



重要更新:

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




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)




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



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

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



更新:這已在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




你會接受微小的HTML更改嗎?

就像放一個包含select標籤的div標籤一樣。

看一看。




使用pointer-events屬性。

這裡的想法是在本地下拉箭頭上覆蓋一個元素(以創建我們自定義的元素),然後禁止它上面的指針事件。 [看這個帖子 ]

這是一個使用這種方法的工作FIDDLE

另外,在這個SO答案中,我更詳細地討論了這個和另一個方法。




我們找到了一個簡單而體面的方式來做到這一點。 它是跨瀏覽器,可降解的,並且不會打破表單發布。 首先將選擇框的opacity0

.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。 Easypeasy與jQuery:

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

而已! 只需樣式您的div而不是選擇框。 我沒有測試過上面的代碼,所以你可能需要調整它。 但希望你能獲得要點。

我認為這個解決方案勝過{-webkit-appearance: none;} 。 瀏覽器最多應該做的是與表單元素進行口令交互,但絕對不是它們最初在頁面上顯示的方式,因為這會破壞網站設計。







try this css

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

Its working




不幸的是,對你而言,這 “某種幻想”。 通常情況下,網頁作者不需要重新設計表單元素。 許多瀏覽器故意不讓你設計它們,以便用戶看到他們習慣的操作系統控件。

通過瀏覽器和操作系統來實現這一點的唯一方法是使用JavaScript,並用“DHTML”替換select元素。

以下文章展示了三種基於jQuery的插件,可以讓你做到這一點(這有點舊,但目前我找不到任何當前的東西)

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




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




最近我一直在解決這個問題,而不是設置父font-size:0然後將孩子設置回合理的值,我通過設置父容器letter-spacing:-.25em得到一致的結果,然後孩子返回letter-spacing:normal

在另一個線程中,我看到一位評論者提到font-size:0並不總是理想的,因為人們可以在瀏覽器中控制最小字體大小,完全否定將字體大小設置為零的可能性。

無論指定的字體大小是100%,15pt還是36px,使用ems似乎都能正常工作。

http://cdpn.io/dKIjo







html css firefox css3