วิธีลบไอคอนลูกศรเริ่มต้นจากรายการดรอปดาวน์ (องค์ประกอบที่เลือก)

297

ฉันต้องการลบลูกศรแบบเลื่อนลงจาก<select>องค์ประกอบHTML ตัวอย่างเช่น:

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

จะทำอย่างไรใน Opera, Firefox และ Internet Explorer

ป้อนคำอธิบายรูปภาพที่นี่

— user2301515
แหล่งที่มา

บางคำตอบ / แฮ็กสำหรับการซ่อนไว้ใน Firefox - stackoverflow.com/questions/5912791/ …

— andyb

2

ลักษณะ #slectType { -webkit-appearance: none; appearance: none /*menulist*/ ! สำคัญ

; max-width: 300px; line-height: 0px;}  input[type='text'], select {max-height: 30px;max-width: 300px; text-align-last: center; /*text-indent: 5px;*/} button:hover {color: #FFF;background-color: #566977;box-shadow:none;border-color: #759AB5;} #errorMSG{z-index: 2147483647;}

เรียกดู [CH: -webkit, FF: -moz, IE: -ms, Oprea: -o];

— Yash

1

อาจเป็นลูกศร

— Muath

ซ้ำซ้อนกับHTML ซ่อนเลือกลูกศรดร็อปดาวน์ด้วย css

— Damjan Pavlica

382

ไม่จำเป็นต้องแฮ็กหรือล้น มีองค์ประกอบหลอกสำหรับลูกศรแบบหล่นลงบน IE:

select::-ms-expand {
    display: none;
}

— nrutas
แหล่งที่มา

22

เนื่องจากคำถามคือวิธีการลบลูกศรดรอปดาวน์ใน IE IE9 ไม่มีฟังก์ชั่นนี้ แต่ใช้งานได้ใน IE10 ดังนั้นหากคุณไม่ได้ใช้ windows XP คุณควรใช้ IE10 อยู่ดี IE11 ใกล้จะหมดแล้ว ตัวเลือกอื่น ๆ คือแฮ็ค CSS ที่น่าเกลียดเพื่อซ่อนปุ่มดรอปดาวน์ที่แท้จริงและสร้างขึ้นเอง

— nrutas

2

ลิงก์นี่คือแฮ็คที่น่าเกลียดเพื่อซ่อนการไหลล้น

— nrutas

1

ทำงานได้ใน IE11 Gracias!

— ConorLuddy

สิ่งนี้ไม่ทำงานใน Firefox ใช้โซลูชันของ Varun Rathore ด้านล่างสำหรับ Firefox

— เกือบPitt

1

นี่สำหรับ IE เท่านั้น แน่นอนว่ามันจะไม่ทำงานใน Firefox

— nrutas

289

โซลูชันที่กล่าวถึงก่อนหน้านี้ทำงานได้ดีกับ chrome แต่ไม่ใช่ใน Firefox

ฉันพบโซลูชันที่ทำงานได้ดีทั้งใน Chrome และ Firefox (ไม่ใช่ใน IE) เพิ่มคุณสมบัติต่อไปนี้ใน CSS สำหรับส่วนที่คุณเลือกและปรับระยะขอบเพื่อให้เหมาะกับความต้องการของคุณ

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

หวังว่าจะช่วย :)

— Varun Rathore
แหล่งที่มา

9

เคล็ดลับนี้หยุดทำงานกับ Firefox ในเวอร์ชัน 31 (ใน Nightly build ณ เดือนพฤษภาคม 2014) มาดูกันว่าสามารถทำอะไรได้บ้างในระหว่างนี้ ส่วนสำคัญที่ฉันเขียนนี้มีการลดระดับเต็ม: gist.github.com/joaocunha/6273016

— João Cunha

วิธีการของJoäo Cunha ตรวจสอบและใช้งานได้สำเร็จ เมื่อคุณตรวจสอบอย่าลืมเปิดลิงค์ใน firefox!

— NoobishPro

มันใช้งานได้สำหรับฉัน ฉันต้องการใช้มันสำหรับ wkhtmltopdf เพื่อสร้าง pdf จาก html ขอบคุณ

— Faisal

187

วิธีง่ายๆในการลบลูกศรลงจากการเลือก

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}

<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>

ขยายตัวอย่างข้อมูล

— Sangeet Shah
แหล่งที่มา

4

ฉันเพิ่งใช้appearance: noneกับ Chrome และ Firefox Quantum (v59 ขึ้นไป) คือไม่จำเป็นต้องมีคำนำหน้าของผู้ขายอีกต่อไป

— CPHPython

2

เบราว์เซอร์ @CPHPython ส่วนใหญ่เป็นความคิดเห็นนี้ยังมี "การสนับสนุนบางส่วนด้วยคำนำหน้า" แท็กกับพวกเขา ...

— แดน

2

@CPHPython คุณต้องติดตั้งAutoprefixerในโครงการของคุณเพื่อให้โปรแกรมสำเร็จรูปไม่appearance: noneทำงาน เบราว์เซอร์ส่วนใหญ่ยังคงต้องการคำนำหน้า

— Daniel Tonon

@DanielTonon โอ้ฉันอาจจะใช้แพคเกจ postcss เช่นนั้น ฉันจำไม่ได้ แต่ฉันคิดว่าฉันตรวจสอบผู้ตรวจสอบของเบราว์เซอร์ก่อนแสดงความคิดเห็น

— CPHPython

58

ลองสิ่งนี้:

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

JS Bin: http://jsbin.com/aniyu4/2/edit

หากคุณใช้ Internet Explorer:

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

หรือคุณสามารถใช้ Choosen: http://harvesthq.github.io/chosen/

— EpokK
แหล่งที่มา

1

คุณทดสอบJSBin ของคุณใน IE และ firefox หรือไม่ ฉันยังเห็นลูกศรดรอปดาวน์ในตัวทั้งคู่

— Martin Smith

ตรวจสอบกับ Choosen ฉันคิดว่ามันเป็นตัวเลือกที่ดีที่สุด

— EpokK

"ถ้าคุณใช้ Internet Explorer" คุณต้องคำนึงถึงประชากรจำนวนมากที่ใช้ IE และให้ความสำคัญกับพวกเขาโดยไม่คำนึงถึง

— Danny Mahoney

สถิติผู้ใช้ไซต์ของเรามีดังนี้: 5.21% IE หรือ 2.37% Edge

— nu everest

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

— Brandito

17

ลองสิ่งนี้:

HTML:

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

CSS:

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

— Luke Kalyan Brata Sarker
แหล่งที่มา

15

ลองสิ่งนี้มันใช้งานได้สำหรับฉัน

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>
    
<div class="select-wrapper">
     <select> ... </select>
</div>

ขยายตัวอย่างข้อมูล

คุณไม่สามารถซ่อนได้ แต่การใช้โอเวอร์โฟลว์ที่ซ่อนอยู่คุณสามารถทำให้มันหายไปได้

— Mahesh Shitole
แหล่งที่มา

6

แค่อยากจะทำกระทู้ให้เสร็จ เพื่อให้ชัดเจนมากนี้ไม่ทำงานใน IE9 แต่เราสามารถทำได้โดยเคล็ดลับ css เล็กน้อย

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

— sun2
แหล่งที่มา

5

ตามที่ฉันตอบ ลบเลือกลูกศรบน IE

ในกรณีที่คุณต้องการใช้คลาสและ pseudo-class:

.simple-control เป็นคลาส css ของคุณ

:disabled เป็นคลาสหลอก

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}

— Tejasvi Hegde
แหล่งที่มา

4

select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}

— Mitul
แหล่งที่มา

2

คุณไม่สามารถทำได้ด้วยการสนับสนุนข้ามเบราว์เซอร์ที่ทำงานได้อย่างสมบูรณ์

ลองใช้การแบ่ง 50 พิกเซลและสมมติไอคอนดร็อปดาวน์ที่คุณต้องการที่ด้านขวาของไอคอนนี้

ขณะนี้ภายใน div นั้นให้เพิ่มแท็กเลือกที่มีความกว้าง 55 พิกเซลอาจจะ (บางอย่างมากกว่าความกว้างของคอนเทนเนอร์)

ฉันคิดว่าคุณจะได้รับสิ่งที่คุณต้องการ

ในกรณีที่คุณไม่ต้องการไอคอนดรอปทางด้านขวาให้ทำตามขั้นตอนทั้งหมดยกเว้นการเลื่อนภาพไปทางขวา ตั้งค่าเค้าโครง: 0 สำหรับโฟกัสสำหรับแท็กที่เลือก แค่นั้นแหละ

— Kaustav Banerjee
แหล่งที่มา

1

ฉันไม่สามารถรับความช่วยเหลือจากคำแนะนำเหล่านี้ไม่ได้ ใครสามารถให้รหัสเพียงพอที่นี่ ขอบคุณ.

— 2301515

2

มีห้องสมุดชื่อ DropKick.js ที่มาแทนที่ dropdowns select ปกติด้วย HTML / CSS เพื่อให้คุณสามารถจัดสไตล์และควบคุมด้วย javascript ได้อย่างเต็มที่ http://dropkickjs.com/

— nrutas
แหล่งที่มา

2

ใช้งานได้กับเบราว์เซอร์และทุกรุ่น:

JS

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

HTML

<select class="first" id="first">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>

— SK
แหล่งที่มา