การแก้ปัญหาไม่สามารถกำหนด padding ให้กับ select ในบราวเซอร์บางตั
ตามกฏของ W3 แล้ว เราจะไม่สามารถใช้ padding กับ select ได้ครับ ทำให้การกำหนด padding ให้กับบราวเซอร์บางตัวไม่มีผลแต่อย่างใด ผมเขียนว่า "บางตัว" นะครับ เพราะยังมีบราวเซอร์บางตัว เช่น Firefox หรือ Opera ไม่ปฏิบัติตามกฏนี้
เราสามารถใช้ text-indent แทนได้ครับ เพื่อทำการเว้นช่องว่างด้านซ้ายของ select
แต่โชคร้ายที่ text-index ของ webkit (เช่น safari, chrome) และ firefox ทำตัวไม่เหมือนกัน ดังนั้น งานนี้เลยต้องมีการ hack นิดหน่อย
สรุปดื้อๆเลยละกันว่า เราจะยังคงใช้ padding กับ firefox ต่อไป และใช้ text-indent กับ webkit แทน
เราสามารถใช้ text-indent แทนได้ครับ เพื่อทำการเว้นช่องว่างด้านซ้ายของ select
text-indent: 15px;
แต่โชคร้ายที่ text-index ของ webkit (เช่น safari, chrome) และ firefox ทำตัวไม่เหมือนกัน ดังนั้น งานนี้เลยต้องมีการ hack นิดหน่อย
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* webkit only */
}
สรุปดื้อๆเลยละกันว่า เราจะยังคงใช้ padding กับ firefox ต่อไป และใช้ text-indent กับ webkit แทน
select {
padding-left: 15px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* webkit only */
select {
text-indent: 15px;
padding-left: 0;
}
}