-7

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

Mayur
  • 2,835
  • 6
  • 27
  • 27
  • 1
    Are you asking that each item within the dropdown list has whitespace to the left? Or are you simply asking how to 'indent' the dropdown on the page? Please be more concise. – KP. Jun 08 '10 at 12:53
  • Doublepost: http://stackoverflow.com/questions/2966855/padding-is-not-working-in-safari-and-ie-in-select-list – Sjoerd Jun 08 '10 at 13:07

1 Answers1

2

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.

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • Yes but its working fine inn firefox not in safari – Mayur Jun 08 '10 at 12:58
  • you could try `margin` instead of `padding` – KP. Jun 08 '10 at 13:03
  • @KP: that would push the entire element to the right, not have whitespace between the inside of the border and the content of the select box. – Kyle Jun 08 '10 at 13:04
  • What about just sticking a bunch of ` `'s on the side? Horrible, yes, but this whole question seems quite random anyway.. – Jeriko Jun 08 '10 at 13:17
  • yes i have used it text indent now its working fine in safari but firefox not working – Mayur Jun 08 '10 at 13:22
  • Updated my answer, it will work, I use this jQuery and it works perfectly. – Kyle Jun 08 '10 at 13:29
  • Thanks for plugin now its working fine in safari but getting problem in ie7 is there any way to do it works in ie7 – Mayur Jun 08 '10 at 14:20