how to leave a gap in select list from left

Question

Hi All,

I m trying to leave a gap from left in select list, but its getting problem in firefox and safari please give me source code or any reference link from where i can work...

code which i use :

<select style="padding:10px">
   <option>Male</option>
   <option>female</option>
   <option>other</option>
</select>

Thanks

Yes i want indent from left

Answer 1

Maybe you were after something like:

<select style="padding: 0 0 0 10px">
   <option>Male</option>
   <option>female</option>
   <option>other</option>
</select>

jsFiddle example here.

Is that what you wanted?

Edit:

After some testing in Safari(for PC) you can style your select with text-indent:20px; Safari. Maybe you'd be better off using something like the Brainfault select box replacement jQuery, which I just viewed the example in Safari (PC) and the jQuery works fine.

Last Edit:

For your specific needs, get this: CSS Browser selector, and install it on your page (just download it to your scripts folder and copy and paste this into your head: <script src="path-to-file/css_browser_selector.js" type="text/javascript"></script>)

Then use this HTML:

<select class="myselect">
   <option>Male</option>
   <option>female</option>
   <option>other</option>
</select>

Then use this CSS:

.gecko .myselect {
  padding: 0 0 0 20px;
}

.webkit .myselect {
text-indent:20px;
}

Isung this jQuery selection plugin, it will tell FF to use padding and Safari(and chrome) to use text indent.

Answer 2

Doublepost: http://stackoverflow.com/questions/2966855/padding-is-not-working-in-safari-and-ie-in-select-list