นี่คือสามโซลูชั่น:
โซลูชัน # 1 - ลักษณะที่ปรากฏ: ไม่มี - ด้วย Internet Explorer 10 - 11 วิธีแก้ปัญหา ( สาธิต )
-
หากต้องการซ่อนชุดลูกศรเริ่มต้นappearance: noneในองค์ประกอบที่เลือกจากนั้นเพิ่มลูกศรที่คุณกำหนดเองด้วยbackground-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
การสนับสนุนเบราว์เซอร์:
appearance: noneมีการสนับสนุนเบราว์เซอร์ที่ดีมาก ( caniuse ) - ยกเว้น Internet Explorer 11 (และใหม่กว่า) และ Firefox 34 (และใหม่กว่า)
เราสามารถปรับปรุงเทคนิคนี้และเพิ่มการสนับสนุนสำหรับ Internet Explorer 10 และ Internet Explorer 11 โดยการเพิ่ม
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
หาก Internet Explorer 9 เป็นข้อกังวลเราไม่มีวิธีลบลูกศรเริ่มต้น (ซึ่งหมายความว่าตอนนี้เราจะมีลูกศรสองอัน) แต่เราสามารถใช้ตัวเลือก Internet Explorer 9 ที่ขี้ขลาดได้
ถึงอย่างน้อยเลิกทำลูกศรที่กำหนดเองของเรา - ปล่อยให้ลูกศรเลือกเริ่มต้นยังคงอยู่
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
ทั้งหมดเข้าด้วยกัน:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
โซลูชันนี้ง่ายและมีการสนับสนุนเบราว์เซอร์ที่ดี - โดยทั่วไปควรจะเพียงพอ
หากเบราว์เซอร์รองรับ Internet Explorer 9 (และใหม่กว่า) และ Firefox 34 (และใหม่กว่า) จำเป็นต้องอ่านต่อ ...
โซลูชัน # 2 ตัดส่วนที่เลือกเพื่อซ่อนลูกศรเริ่มต้น ( สาธิต )
-
(อ่านเพิ่มเติมได้ที่นี่)
ล้อมรอบselectองค์ประกอบใน div ด้วยความกว้างคงที่และoverflow:hiddenและ
จากนั้นให้selectองค์ประกอบมีความกว้างประมาณ20 พิกเซลมากกว่า divdiv
ผลลัพธ์คือลูกศรดรอปดาวน์เริ่มต้นของselectองค์ประกอบจะถูกซ่อน (เนื่องจากoverflow:hiddenบนคอนเทนเนอร์) และคุณสามารถวางภาพพื้นหลังใด ๆ ที่คุณต้องการทางด้านขวาของ div
ประโยชน์ของวิธีการนี้คือว่ามันเป็นเบราว์เซอร์ (Internet Explorer 8 และต่อมาWebKitและตุ๊กแก ) อย่างไรก็ตามข้อเสียของวิธีการนี้คือตัวเลือกแบบหล่นลงยื่นออกทางด้านขวา (โดย 20 พิกเซลที่เราซ่อน ... เนื่องจากองค์ประกอบตัวเลือกใช้ความกว้างขององค์ประกอบที่เลือก)
[ควรสังเกตว่าถ้าองค์ประกอบการเลือกกำหนดเองมีความจำเป็นสำหรับอุปกรณ์มือถือ - ดังนั้นปัญหาข้างต้นใช้ไม่ได้ - เนื่องจากวิธีการที่โทรศัพท์แต่ละเครื่องเปิดองค์ประกอบการเลือก ดังนั้นสำหรับมือถือนี่อาจเป็นทางออกที่ดีที่สุด]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}
<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>
หากจำเป็นต้องใช้ลูกศรที่กำหนดเองใน Firefox - ก่อนหน้าเวอร์ชัน 35 - แต่คุณไม่จำเป็นต้องรองรับ Internet Explorer เวอร์ชันเก่า - โปรดอ่านต่อไป ...
โซลูชัน # 3 - ใช้pointer-eventsคุณสมบัติ ( สาธิต )
-
(อ่านเพิ่มเติมได้ที่นี่)
แนวคิดที่นี่คือการซ้อนทับองค์ประกอบบนลูกศรดรอปดาวน์แบบดั้งเดิม (เพื่อสร้างองค์ประกอบที่กำหนดเองของเรา) จากนั้นไม่อนุญาตเหตุการณ์ตัวชี้บน
ข้อได้เปรียบ:มันทำงานได้ดีใน WebKit และ Gecko มันก็ดูดีเช่นกัน (ไม่มีการแยกoptionองค์ประกอบออก)
ข้อเสีย: Internet Explorer (Internet Explorer 10 ขึ้นไป) ไม่รองรับpointer-eventsซึ่งหมายความว่าคุณไม่สามารถคลิกลูกศรที่กำหนดเองได้ นอกจากนี้ข้อเสียอื่น ๆ (ชัดเจน) ด้วยวิธีนี้คือคุณไม่สามารถกำหนดเป้าหมายรูปลูกศรใหม่ด้วยเอฟเฟกต์โฮเวอร์หรือเคอร์เซอร์มือได้เนื่องจากเราเพิ่งปิดใช้งานกิจกรรมตัวชี้บนพวกเขา!
อย่างไรก็ตามด้วยวิธีนี้คุณสามารถใช้ Modernizer หรือความคิดเห็นตามเงื่อนไขเพื่อทำให้ Internet Explorer กลับไปเป็นลูกศรมาตรฐานในตัว
หมายเหตุ:การที่ Internet Explorer 10 ไม่สนับสนุนconditional commentsอีกต่อไป: ถ้าคุณต้องการที่จะใช้วิธีการนี้คุณอาจจะใช้Modernizr แต่ก็ยังคงเป็นไปได้ที่จะไม่รวม CSS ชี้เหตุการณ์จาก Internet Explorer 10 ด้วย CSS สับอธิบายที่นี่
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646E;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #DDD8DC;
background: #FFF;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->