In chrome the user agent stylesheet is applying the following form element style
font: normal normal normal 11px/normal '.HelveticaNeueDeskInterface-Regular';
I've noticed in normalize
they handle this by doing the following:
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
What I'm curious about is why this never made it into Forget normalize or resets; lay your own css foundationn
post?
If you have forms on your site then adding extra rules to bring them in line is absolutely necessary.
There are a few reasons why I left this part out...
optgroup
and[type=reset]
are rarely used, so it's pretty hard to decide what everyone might need.select
inputs (CodePen demo) but some people accept the tradeoffs and like to use plugins for greater customization.I found I was procrastinating publishing the article agonising over what to include so I just pushed what I was sure of; intending to flesh it out in later updates. I have a few important additions (some relating to
button
) on the way now. Time permitting, I will add an additional section with recommended form styles :)Feel free to get involved and add issues or pull requests about this stuff to Barebones.
The most important thing is for people to grasp is how this strategy is different from normalize and resets and why it is probably a good idea.