Both WebKit and Mozilla browsers have introduced default styles for certain specific element types, in an effort to impose some degree of design consistency across the platform.

You might be tempted to assume a well-placed !important will override those default styles but not necessarily so. Depending on the type (like “search” for example) only certain CSS properties are accessible and the rest are just ignored. !important indeed.

Fortunately there’s an “off” switch, the appearance properly:

<style>
* {
    /* turn off default WebKit element styling */
    -webkit-appearance: none;

    /* turn off default Mozilla element styling */
    -moz-appearance: none;
}
</style>