GORAGOD.com

ตามกฏของ W3 แล้ว เราจะไม่สามารถใช้ padding กับ select ได้ครับ ทำให้การกำหนด padding ให้กับบราวเซอร์บางตัวไม่มีผลแต่อย่างใด ผมเขียนว่า "บางตัว" นะครับ เพราะยังมีบราวเซอร์บางตัว เช่น Firefox หรือ Opera ไม่ปฏิบัติตามกฏนี้

เราสามารถใช้ 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;
    }
}