CSS collection of reset html form style

I recently made a project with a lot of forms , and the commonly used forms are all used, but the forms are inSafari browser for Mac,as well asiphoneOn the built-in browser, there areFirefox browserThe effect shown is always unsatisfactory. I have done a lot of work to reset the default style, but it seems that it is still not enough. Therefore, after the project is over, I quickly summarize the CSS that resets the form style and its corresponding scenes.

1. First summarize the commonly used html form elements
MDN official website on the introduction of input input elements
used in the project

input type="text"
input type="number"
input type="password"
input type="radio"
input type="checkbox"
input type="email"
input type="tel"
input type="search"

The above are the form elements used in this project.
2.
Each browser core that resets the css of the form element has some default css styles, which will be imposed on our html elements. If we don’t write css to override these styles , Then our form elements may inherit some of the browser’s default styles, and may not achieve the desired effect.
The input style that comes with chrome is as shown in Figure 1-1

The most commonly used css to reset form elements

-webkit-appearance: none;
 appearance:none;
 -moz-appearance:none;
 outline: none;   

However, the resultinput type=“number”, When typing, there will be small up and down arrows, we need to remove them

/*chrome remove input[number]的上下箭头*/
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button{
    
    
    -webkit-appearance: none !important;
    margin: 0;
}
/*Firefox remove input[number]的上下箭头*/
input[type="number"]{
    
    -webkit-appearance: none;-moz-appearance:textfield;outline: none;}

demo html

Time is limited, so I have to write so much first. If you have any other problems, please feel free to discuss.