xsongs.net
New Member
I am wondering, why a HTML select tag has a larger padding-left than a input tag, although both have the same style applied?This is reproducible with Firefox 17, Chrome 23, IE 8 and IE 9. Only Opera shows both elements with an identical padding-left.The same problem occurs while using a reset style sheet. Input and select have a margin and padding of 0 and no border, box-sizing: border-box is used.Here is a screenshot of Firefox:
.And a code example (there is no form action etc):\[code\]<!doctype html><html><head> <title>input and select - padding-left</title> <style> * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } input, select { width: 150px; padding: 0; margin: 0; border: none; height: 30px; font-size: 16px; } body { background-color: #007; font-size: 36px; } div { margin-left: auto; margin-right: auto; width: 140px; } </style></head><body> <form> <div> <input value="http://stackoverflow.com/questions/13730999/Hello input" /><br/> <select size="1"> <option>Hello select</option> </select> </div> </form></body>\[/code\]Because Opera shows everything as desired, if I would assign different values for padding-left, it would look misaligned in Opera. Therefore, I hope there is another solution.