CSS: Remove padding within select element

问题

I'm trying to remove padding from within a select element so that the text within it lines up with the text in the input element directly below it.

I've tried the below amongst other things.

select{
    padding-left:0;
    }

Any ideas?

JSfiddle here http://jsfiddle.net/pLSkH/2/

回答1:

remove the text-indent: 3px; from select css

input, select {
    float: right;
    width: 50%;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    font-family: Calibri;
    font-size: 12px;
}

http://jsfiddle.net/pLSkH/4/

text-indent: 3px;causing horizontal spacing with respect to the left, so its seems like a padding

回答2:

I have solved the padding issue (I wanted to remove the left "padding") in Chrome and Firefox by using a negative value:

style=text-indent:-3px;

回答3:

your jsfiddle had some minor html errors:

• you're not supposed to wrap a label around both the label and input.

it's supposed to be:

<label for "Firstnameame">First Name</label>
<input type="text" name="Firstname">

when i corrected the html, a lot of the css changed. You can check out how mine came out and see if that was what you were looking for: http://jsfiddle.net/pLSkH/3/

来源：https://stackoverflow.com/questions/19463722/css-remove-padding-within-select-element