[Solved] how to leave a gap in select list from left [closed]

Question

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="https://stackoverflow.com/questions/2997357/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.

Accepted Answer