วิธีลบลูกศรออกจากองค์ประกอบที่เลือกใน Firefox

ฉันพยายามจัดแต่งselectองค์ประกอบโดยใช้ CSS3 ฉันได้รับผลลัพธ์ที่ฉันต้องการใน WebKit (Chrome / Safari) แต่ Firefox ไม่ได้เล่นได้ดี (ฉันไม่ได้รำคาญกับ IE) ฉันใช้appearanceคุณสมบัติCSS3 แต่ด้วยเหตุผลบางอย่างฉันไม่สามารถเขย่าไอคอนดรอปดาวน์จาก Firefox

นี่คือตัวอย่างของสิ่งที่ฉันทำ: 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ไม่กำจัดรายการแบบหล่นลง

ความคิดใด ๆ ไม่จาวาสคริปต์ไม่ใช่ตัวเลือก

โอเคฉันรู้ว่าคำถามนี้มีอายุ แต่ 2 ปีตามรอยและโมซิลล่าไม่ได้ทำอะไรเลย

ฉันคิดวิธีแก้ปัญหาง่ายๆ

การทำเช่นนี้จะเป็นการตัดการจัดรูปแบบทั้งหมดของกล่องที่เลือกใน Firefox และล้อมรอบองค์ประกอบรอบ ๆ กล่องที่เลือกด้วยสไตล์ที่คุณกำหนดเอง แต่ควรใช้กับ 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 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 และโยนลูกศรที่กำหนดเองลงในคลาส 'css-select-moz' ของคลาส Span แต่ให้แสดงบนโมซิลล่าแบบนี้เท่านั้น:

.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 ชั่วโมงที่ผ่านมา (ฉันเพิ่งเริ่มการออกแบบเว็บไซต์และสอนตัวเองได้อย่างสมบูรณ์) อย่างไรก็ตามชุมชนนี้ได้ให้ความช่วยเหลือฉันทางอ้อมฉันคิดว่ามันเป็นเวลาที่ฉันจะคืนบางสิ่งบางอย่าง

ฉันได้ทดสอบเฉพาะใน firefox (mac) รุ่น 18 แล้ว 22 (หลังจากที่ฉันอัปเดต)

ข้อเสนอแนะทั้งหมดยินดีต้อนรับ

อัปเดต:สิ่งนี้ได้รับการแก้ไขใน Firefox v35 ดูส่วนสำคัญทั้งหมดสำหรับรายละเอียด

เพียงแค่คิดออกวิธีการเอาลูกศรเลือกจาก 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

เคล็ดลับที่เหมาะกับฉันคือการเลือกความกว้างมากกว่า 100% และใช้การล้น: ซ่อน

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

นี่เป็นวิธีเดียวที่จะซ่อนลูกศรดรอปดาวน์ใน FF ได้แล้ว

BTW ถ้าคุณต้องการให้ดรอปดาวน์ที่สวยงามใช้http://harvesthq.github.com/chosen/

การอัปเดตที่สำคัญ:

ในฐานะของ Firefox V35 ตอนนี้คุณสมบัติของรูปลักษณ์ใช้งานได้แล้ว !!

จากบันทึกประจำรุ่นอย่างเป็นทางการของ firefox ใน V35 :

การใช้-moz-appearanceกับnoneค่าบนคอมโบบ็อกซ์ตอนนี้ลบปุ่มแบบเลื่อนลง (ข้อผิดพลาด 649849)

ดังนั้นเพื่อซ่อนลูกศรเริ่มต้น - มันง่ายพอ ๆ กับการเพิ่มกฎต่อไปนี้ในองค์ประกอบที่เราเลือก:

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

การสาธิต

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>

เราพบวิธีที่ง่ายและเหมาะสมในการทำเช่นนี้ มันข้ามเบราว์เซอร์ย่อยสลายได้และไม่ทำลายโพสต์แบบฟอร์ม ชุดแรกกล่องเลือกเป็นไป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>

อัปเดต InnerHTML ของ div ด้วย javascript Easypeasy กับ jQuery:

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

แค่นั้นแหละ! เพียงแค่สไตล์ div ของคุณแทนการเลือกกล่อง ฉันยังไม่ได้ทดสอบโค้ดข้างต้นดังนั้นคุณอาจต้องปรับแต่งมัน แต่หวังว่าคุณจะได้รับส่วนสำคัญ

{-webkit-appearance: none;}ผมคิดว่านี่เต้นแก้ปัญหา สิ่งที่เบราว์เซอร์ควรทำมากที่สุดคือการกำหนดปฏิสัมพันธ์กับองค์ประกอบของฟอร์ม แต่ไม่แน่นอนว่าการแสดงครั้งแรกบนหน้าเว็บเป็นอย่างไรเมื่อแบ่งการออกแบบเว็บไซต์

ลองด้วยวิธีนี้:

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

หากคุณกำหนดความกว้างให้คุณเลือกคุณสมบัตินี้จะกดปุ่มดรอปบ็อกซ์เริ่มต้นภายใต้พื้นที่ที่เลือก

มันใช้งานได้สำหรับฉัน! ;)

ในขณะที่ไม่ใช่โซลูชันที่สมบูรณ์ฉันพบว่า ...

-moz-appearance: window;

…ใช้ได้ผลบ้าง คุณไม่สามารถเปลี่ยนพื้นหลัง (-color หรือ -image) แต่องค์ประกอบที่สามารถแสดงผลที่มองไม่เห็นด้วยสี: โปร่งใส ไม่สมบูรณ์ แต่เป็นการเริ่มต้นและคุณไม่จำเป็นต้องแทนที่องค์ประกอบระดับระบบด้วย js หนึ่ง

ฉันคิดว่าฉันพบวิธีแก้ปัญหาที่เข้ากันได้กับ 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

มันใช้งานได้ดีมากสำหรับฉัน!

น่าเสียดายสำหรับคุณนี่คือ "สิ่งแฟนซี" โดยปกติแล้วผู้เขียนเว็บจะไม่วางองค์ประกอบของแบบฟอร์มขึ้นใหม่ เบราว์เซอร์จำนวนมากจงใจไม่ให้สไตล์คุณเพื่อให้ผู้ใช้เห็นการควบคุมระบบปฏิบัติการที่พวกเขาคุ้นเคย

วิธีเดียวที่จะทำเช่นนี้อย่างสม่ำเสมอบนเบราว์เซอร์และระบบปฏิบัติการคือใช้ JavaScript และแทนที่selectองค์ประกอบด้วย "DHTML"

บทความต่อไปนี้แสดงปลั๊กอินที่ใช้ jQuery สามรายการที่อนุญาตให้คุณทำเช่นนั้น (มันค่อนข้างเก่า แต่ตอนนี้ฉันไม่พบสิ่งใดในปัจจุบัน)

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#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; 
    }
}

ฉันกำลังเลือกสไตล์ที่ชอบเพียงแค่นี้

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

ฉันรู้ว่าคำถามนี้ค่อนข้างเก่า แต่เนื่องจากมันเปิดใช้งานบน google และนี่เป็นโซลูชัน "ใหม่":

appearance: normalดูเหมือนว่าจะทำงานได้ดีใน Firefox สำหรับฉัน (รุ่น 5 ตอนนี้) แต่ไม่ใช่ใน Opera และ IE8 / 9

เป็นวิธีแก้ปัญหาสำหรับ Opera และ IE9 ฉันใช้ :before pseudoselector เพื่อสร้างกล่องสีขาวใหม่และวางลูกศรไว้ด้านบน

น่าเสียดายที่ใน IE8 ไม่สามารถทำได้งานได้ กล่องมีการแสดงอย่างถูกต้อง แต่ลูกศรเพิ่งโผล่ออกมา ... : - /

การใช้select:beforeงานได้ดีใน Opera แต่ไม่ใช่ใน IE หากฉันดูที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ฉันเห็นว่ากำลังอ่านกฎอย่างถูกต้องและจากนั้นก็ข้ามพวกเขาไป ดังนั้นผมจึงใช้<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;
}

คุณอาจต้องปรับแต่งนิดหน่อย แต่นี่ใช้ได้สำหรับฉัน!

คำแถลงการณ์ปฏิเสธความรับผิดชอบ: ฉันกำลังใช้สิ่งนี้เพื่อรับเอกสารรูปแบบหน้าเว็บที่ดูดีด้วยแบบฟอร์มดังนั้นฉันจึงไม่จำเป็นต้องสร้างหน้าเว็บที่สอง ฉันไม่ใช่ 1337 haxx0r ที่ต้องการแถบเลื่อนสีแดง<marquee>แท็กและอะไรก็ตาม :-) โปรดอย่าใช้สไตล์ที่มากเกินไปกับแบบฟอร์มเว้นแต่คุณจะมีเหตุผลที่ดีมาก

ใช้pointer-eventsคุณสมบัติ

แนวคิดที่นี่คือการซ้อนทับองค์ประกอบบนลูกศรดรอปดาวน์แบบดั้งเดิม (เพื่อสร้างองค์ประกอบที่กำหนดเองของเรา) จากนั้นไม่อนุญาตเหตุการณ์ตัวชี้บน [ดูโพสต์นี้ ]

นี่คือFIDDLE ที่ทำงานโดยใช้วิธีนี้

นอกจากนี้ในคำตอบดังนั้นฉันพูดถึงเรื่องนี้และวิธีอื่นในรายละเอียดมากขึ้น

ใช้งานได้ (ทดสอบกับ Firefox 23.0.1):

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

การสร้างคำตอบโดย @ 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;
}

นอกเหนือจากคำตอบของ Joao Cunhaแล้วปัญหานี้อยู่ในรายชื่อ ToDo List ของ Mozillaและมีเป้าหมายสำหรับ ver 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;
}

ตั้งแต่ Firefox 35 "-moz-appearance:none " ที่คุณเขียนไปแล้วในรหัสของคุณในที่สุดก็ลบปุ่มลูกศรตามที่ต้องการ

มันเป็นข้อผิดพลาดที่แก้ไขได้ตั้งแต่เวอร์ชั่นนั้น

มีการพูดคุยมากมายเกิดขึ้นที่นี่ & ที่นั่น แต่ฉันไม่เห็นวิธีแก้ไขปัญหาที่เหมาะสมสำหรับปัญหานี้ สุดท้ายก็ลงเอยด้วยการเขียนรหัส Jquery + CSS เล็ก ๆ สำหรับทำ HACK นี้บน IE & Firefox

คำนวณความกว้างขององค์ประกอบ (องค์ประกอบที่เลือก) โดยใช้ Jquery เพิ่ม Wrapper Around เลือกอิลิเมนต์และซ่อนโอเวอร์โฟลว์สำหรับอิลิเมนต์นี้ ตรวจสอบให้แน่ใจว่าความกว้างของ wrapper นี้เป็น appox น้อยกว่า 25px ขององค์ประกอบที่เลือก สิ่งนี้สามารถทำได้ง่ายด้วย Jquery ดังนั้นตอนนี้ไอคอนของเราคือหายไป .. ! และถึงเวลาสำหรับการเพิ่มไอคอนรูปภาพของเราในองค์ประกอบที่เลือก ... !!! เพียงเพิ่มสองสามบรรทัดง่ายๆสำหรับเพิ่มพื้นหลังและคุณก็เรียบร้อย .. !! ตรวจสอบให้แน่ใจว่าใช้ล้นที่ซ่อนอยู่สำหรับเสื้อคลุมด้านนอก

นี่คือตัวอย่างของรหัสที่ทำสำหรับ 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 ไม่จำเป็นต้องเพิ่ม Hacks ความกว้างคงที่โดยใช้ CSS มันถูกจัดการแบบไดนามิกโดยใช้ JQuery.!

อธิบายเพิ่มเติมได้ที่: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-csscs-

ลอง css นี้

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

มันทำงานได้ดี

appearanceทรัพย์สินจาก CSS3 ไม่อนุญาตให้noneคุ้มค่า ลองดูที่การอ้างอิงของ W3C ดังนั้นสิ่งที่คุณพยายามทำนั้นไม่ถูกต้อง (แน่นอนว่า Chrome ไม่ควรยอมรับเช่นกัน)

แต่น่าเสียดายที่เราไม่มีโซลูชันข้ามเบราว์เซอร์เพื่อซ่อนลูกศรนั้นโดยใช้ CSS บริสุทธิ์ คุณจะต้องใช้ JavaScript

ผมแนะนำให้คุณพิจารณาใช้ปลั๊กอิน selectbox jQuery มันเบามากและทำได้ดีมาก

คุณสามารถเพิ่มความกว้างของกล่องและย้ายลูกศรเข้าใกล้ด้านซ้ายของลูกศร สิ่งนี้จะช่วยให้คุณครอบคลุมลูกศรด้วย div สีขาวที่ว่างเปล่า

ลองดู: http://jsbin.com/aniyu4/86/edit

คุณจะยอมรับการเปลี่ยนแปลงเล็กน้อยใน html หรือไม่

สิ่งที่ชอบใส่แท็ก div ที่มีแท็กเลือก

ลองดูสิ.

หรือคุณสามารถเลือกคลิป บางสิ่งบางอย่างตาม:

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

สิ่งนี้ควรคลิป 30px ของทางด้านขวาของกล่องที่เลือกและลอกลูกศรออก ตอนนี้ให้ภาพพื้นหลัง 170px และ voila เลือกสไตล์

มันเป็นแฮ็คขนาดใหญ่ แต่-moz-appearance: menulist-textอาจทำเคล็ดลับได้

ฉันมีปัญหาเดียวกัน ง่ายที่จะทำให้ใช้งานได้บน FF และ Chrome แต่ใน IE (8+ ที่เราต้องการการสนับสนุน) สิ่งต่าง ๆ มีความซับซ้อน ทางออกที่ง่ายที่สุดที่ฉันสามารถหาองค์ประกอบการเลือกแบบกำหนดเองที่ใช้งานได้ "ทุกที่ที่ฉันพยายาม" รวมถึง IE8 กำลังใช้. customSelect ()

สับประโยชน์สำหรับฉันคือการตั้งค่าการแสดง (เลือก) inline-flexเพื่อ ตัดลูกศรออกจากปุ่มเลือกของฉัน โดยไม่ต้องเพิ่มรหัสทั้งหมด

• สำหรับ Fx เท่านั้น -webkit appearanceยังจำเป็นสำหรับ Chrome และอื่น ๆ ...

คำตอบของ 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;
  }
}

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

ฉันใช้: after-element เพื่อปกปิดลูกศรที่น่าเกลียด เนื่องจาก select ไม่รองรับ: หลังจาก, ฉันต้องการ wrapper เพื่อใช้งาน ตอนนี้ถ้าคุณจะคลิกที่ลูกศรดรอปดาวน์จะไม่ลงทะเบียน ... เว้นแต่เบราว์เซอร์ของคุณรองรับpointer-events: noneซึ่งทุกคนยกเว้น IE10- จะ: http://caniuse.com/#feat=pointer-events

ดังนั้นสำหรับฉันมันสมบูรณ์แบบ - วิธีแก้ปัญหาที่ดีสะอาดและปวดหัวอย่างน้อยเมื่อเปรียบเทียบกับตัวเลือกอื่น ๆ ทั้งหมดซึ่งรวมถึงจาวาสคริปต์

TL; DR:

หากผู้ใช้ IE10 (หรือต่ำกว่า) คลิกที่ลูกศรจะไม่ทำงาน ทำงานได้ดีพอสำหรับฉัน ...

หากคุณไม่สนใจเล่นซอกับ 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 ของคุณ ดังนั้นให้องค์ประกอบที่เลือกคลาสและสไตล์ของคลาส

รองรับเบราว์เซอร์ที่ทันสมัยที่สุดหากคุณต้องการกำหนดเป้าหมายเบราว์เซอร์รุ่นเก่าคุณสามารถลองใช้ jQuery รุ่นเก่ากว่าได้ แต่อาจต้องแทนที่ () ด้วย bind () ในฟังก์ชัน (ไม่ได้ทดสอบ)

คำตอบอื่น ๆ ดูเหมือนจะไม่ทำงานสำหรับฉัน แต่ฉันพบแฮ็คนี้ สิ่งนี้ใช้ได้สำหรับฉัน (กรกฎาคม 2014)

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

ในกรณีของฉันฉันมีฟิลด์อินพุต woocommerce ดังนั้นฉันจึงใช้มัน

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

อัปเดตคำตอบของฉันเพื่อแสดงการเลือกมากกว่าการป้อนข้อมูล