Reset padding on Asked Aug 12 '14 at 13:01 Active Aug 12 '14 at 13:37 Viewed 260 times 1 I need to set padding on <select> to the same value as the <input type="text" />, so the text in both fields will be aligned to the same vertical line. For testing purposes I've set margin and padding to 0 on both fields, but the text is still indented in the select element. I've also tried changing text-indent, but with no effect. What am I missing? Here's the demo html css edited Aug 12 '14 at 13:13 Suganth G 5,136 3 25 44 asked Aug 12 '14 at 13:01 Sebastian Nowak 5,607 8 67 107 You can always add an additional left padding just on the input? – olive_tree Aug 12 '14 at 13:04 you can give an other calss to select and give a -ive left margin to this new class – Shah Rukh Aug 12 '14 at 13:07 These are hacks, not reliable solutions. – Sebastian Nowak Aug 12 '14 at 13:10 To get a non-hacky, *cross browser*, and, hell, even cross Operating System solution, you will have to go down the jQuery / javascript road and replace the `` completely. Default browser inputs are a pain to style. – misterManSam Aug 12 '14 at 13:25

Answer 1

Try giving text-indent to your input fields.

CSS:

input.edit{ text-indent:4px; }

DEMO