GORAGOD.com

freelance, web developer, web designer, hosting, domain name

การแก้ปัญหาไม่สามารถกำหนด padding ให้กับ select ในบราวเซอร์บางตั

ตามกฏของ 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;
    }
}
0SHAREFacebookLINE it!
^