จะจัดสไตล์ <option> ด้วย CSS เพียงอย่างเดียวได้อย่างไร?

หมายเหตุ: คำถามนี้ไม่เกี่ยวกับการทำรายการแบบเลื่อนลงที่กำหนดเอง เป็นเพียงความเป็นไปได้ของ<option>องค์ประกอบสไตล์ภายในองค์ประกอบที่เลือกใน CSS

ฉันจะจัดรูปแบบ<option>ของ<select>องค์ประกอบที่เข้ากันได้กับข้ามเบราว์เซอร์ได้อย่างไร ฉันรู้จัก JavaScript หลายวิธีที่ปรับแต่งดรอปดาวน์เพื่อแปลงเป็น<li>ซึ่งฉันไม่ได้ถามถึง

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

ฉันกำลังถามว่าจะเป็นไปได้อย่างไรกับ CSS เท่านั้นโดยเข้ากันได้กับ IE9 +, Firefox และ Chrome

ฉันต้องการสไตล์แบบนี้หรือใกล้เคียงที่สุด

ฉันลองที่นี่http://jsfiddle.net/jitendravyas/juwz3/3/แต่ Chrome ไม่แสดงสไตล์ใด ๆ ยกเว้นสีแบบอักษรในขณะที่ Firefox แสดงเพิ่มเติม วิธีทำให้เส้นขอบและช่องว่างภายในทำงานใน Chrome ด้วย

แก้ไข 2015 พ.ค.

ข้อจำกัดความรับผิดชอบ: ฉันได้นำตัวอย่างจากคำตอบที่เชื่อมโยงด้านล่าง:

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

นอกจาก WebKit แล้วในFirefox 35เราจะสามารถใช้appearanceคุณสมบัติ:

การใช้-moz-appearanceกับnoneค่าบนคอมโบบ็อกซ์จะลบปุ่มแบบเลื่อนลง

ดังนั้นในการซ่อนสไตล์เริ่มต้นจึงทำได้ง่ายเพียงแค่เพิ่มกฎต่อไปนี้ในองค์ประกอบที่เลือก

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

สำหรับการรองรับ IE 11 คุณสามารถใช้ [ ::-ms-expand] [15]

select::-ms-expand { /* for IE 11 */
    display: none;
}

คำตอบเก่า

น่าเสียดายที่สิ่งที่คุณถามไม่สามารถทำได้โดยใช้ CSS บริสุทธิ์ อย่างไรก็ตามนี่คือสิ่งที่คล้ายกันซึ่งคุณสามารถเลือกเป็นวิธีแก้ปัญหาได้ ตรวจสอบรหัสสดด้านล่าง

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

แก้ไข

นี่คือคำถามที่คุณถามเมื่อหลายปีก่อน จะจัดสไตล์ดรอปดาวน์ <select> ด้วย CSS โดยไม่ใช้ JavaScript ได้อย่างไร? อย่างที่บอกมีเพียงใน Chrome และบางส่วนใน Firefox เท่านั้นที่คุณสามารถบรรลุสิ่งที่คุณต้องการได้ ไม่เช่นนั้นน่าเสียดายที่ไม่มีโซลูชัน CSS แบบข้ามเบราว์เซอร์สำหรับการจัดรูปแบบการเลือก

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

ฉันเคยเล่นกับรายการที่เลือกมาก่อนและไม่ได้แทนที่ฟังก์ชันด้วย JavaScript ฉันไม่คิดว่าจะเป็นไปได้ใน Chrome ไม่ว่าคุณจะใช้ปลั๊กอินหรือเขียนโค้ดของคุณเอง CSS เพียงอย่างเดียวก็ไม่จำเป็นสำหรับ Chrome / Safari และอย่างที่คุณกล่าวไว้ Firefox จะจัดการกับมันได้ดีกว่า