Padding Is Not Working in Safari and Ie in Select List

padding is not working in Safari and IE in select list

Even though the W3 spec doesn't disallow padding in select boxes, for whatever reason webkit browsers (Safari, Chrome) don't support it. Instead, you can remove the padding-left and use text-indent instead, adding the same amount to your select box width.

From your example in your comment:

<select id="sexID" name="user[sex]" 
        style="border:1px solid #C1272D;
               width:258px; // 243 + 15px
               text-indent:15px;
               height:25px;
               color:#808080;">

Padding doesn't work on select tags in Safari

Answered previously here: https://stackoverflow.com/a/2967371/181002

Webkit has taken it upon itself to disallow padding for select-items, but you can achieve the same effect by using a simple 'hack', consisting of applying line-height and text-indent to your selectitem.

Here's an example: http://jsfiddle.net/B858P/

input select box don't use a padding in Safari

Its a late answer but I was searching for a solution to the same problem for a while. Using text-indent shifted the elements around the input element and the padding was still ignored.

-webkit-appearance: textfield;

Using that solved my problem, hope this saves someone else time.

Select Padding in IE8

I finally found the answer! I just had to add

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

to my code !

Input and select-elements has padding added in Chrome + Safari, but not Firefox?

This question has been addressed before (such as here, just search for "extra padding"), but the Webkit rendering engine adds the padding (Chrome and Safari both use it).

You can solve this through CSS. The rendering engines just have different "default" values. What you would need to do is explicitly tell the elements to have a padding and margin of 0, or whatever you want it to be.

Basically, if you don't want to give different rendering engines the leeway and ability to misinterpret, you need to be explicit in your style sheet.

How to set height Or Padding in select box (dropdown box) for safari and chrome?

Did you try this CSS for your drop down?

overflow: hidden;
border: none;
outline: none;
-webkit-appearance: none;

For Safari you can try

-webkit-appearance: menulist-button;

so that width and height will work (link)

then you can use background,font-family,padding etc to further enchant your custom select tag. It worked for me in Safari/Chrome/FF ...

EDIT:

Editing option tag is not that easy. You can use the css below but everything is not customisable unfortunately

select option {
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

sources: 1,2

Padding Is Not Working in Safari and Ie in Select List