Input and select-elements has padding added in Chrome + Safari, but not Firefox? Input and select-elements has padding added in Chrome + Safari, but not Firefox? google-chrome google-chrome

Input and select-elements has padding added in Chrome + Safari, but not Firefox?


Remove the <input type="search"> to fix the padding issue in chrome.


This question has been addressed before (such as here, just search for "extra padding"), but the Webkit rendering engine adds the padding (Chrome and Safari both use it).

You can solve this through CSS. The rendering engines just have different "default" values. What you would need to do is explicitly tell the elements to have a padding and margin of 0, or whatever you want it to be.

Basically, if you don't want to give different rendering engines the leeway and ability to misinterpret, you need to be explicit in your style sheet.