Skip to content

Instantly share code, notes, and snippets.

@anthonyshort
Created August 27, 2010 00:50
Show Gist options
  • Save anthonyshort/552543 to your computer and use it in GitHub Desktop.
Save anthonyshort/552543 to your computer and use it in GitHub Desktop.
/* ----------------------------------------------------------------------------------------------------
Super Form Reset
A couple of things to watch out for:
- IE8: If a text input doesn't have padding on all sides or none the text won't be centered.
- The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders.
- You NEED to set the font-size and family on all form elements
- Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs
- You can style the upload button in webkit using ::-webkit-file-upload-button
- ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out.
- IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block.
- By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs
----------------------------------------------------------------------------------------------------*/
input,
label,
select,
button,
textarea
{
margin:0;
border:0;
padding:0;
display:inline-block;
vertical-align:middle;
white-space:normal;
background:none;
line-height:1;
/* Browsers have different default form fonts */
font-size:13px;
font-family:Arial;
}
/* Remove the stupid outer glow in Webkit */
input:focus
{
outline:0;
}
/* Box Sizing Reset
-----------------------------------------------*/
/* All of our custom controls should be what we expect them to be */
input,
textarea
{
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
/* These elements are usually rendered a certain way by the browser */
button,
input[type=reset],
input[type=button],
input[type=submit],
input[type=checkbox],
input[type=radio],
select
{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
/* Text Inputs
-----------------------------------------------*/
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=range],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week]
{
}
/* Button Controls
-----------------------------------------------*/
input[type=checkbox],
input[type=radio]
{
width:13px;
height:13px;
}
/* File Uploads
-----------------------------------------------*/
input[type=file]
{
}
/* Search Input
-----------------------------------------------*/
/* Make webkit render the search input like a normal text field */
input[type=search]
{
-webkit-appearance:textfield;
-webkit-box-sizing:content-box;
}
/* Turn off the recent search for webkit. It adds about 15px padding on the left */
::-webkit-search-decoration
{
display:none;
}
/* Buttons
-----------------------------------------------*/
button,
input[type="reset"],
input[type="button"],
input[type="submit"]
{
/* Fix IE7 display bug */
overflow:visible;
width:auto;
}
/* IE8 and FF freak out if this rule is within another selector */
::-webkit-file-upload-button
{
padding:0;
border:0;
background:none;
}
/* Textarea
-----------------------------------------------*/
textarea
{
/* Move the label to the top */
vertical-align:top;
/* Turn off scroll bars in IE unless needed */
overflow:auto;
}
/* Selects
-----------------------------------------------*/
select
{
}
select[multiple]
{
/* Move the label to the top */
vertical-align:top;
}
@syberknight
Copy link

thanks for this. very helpful.

fyi: i changed line 39 to...

input:focus,
select:focus {

...cause that stupid highlight was on select dropdown options too. :-)

@mjlescano
Copy link

Great! thanks :)

Did a SCSS fork: https://gist.github.com/mjlescano/fc472f778e77c4b760ab

@ohenrik
Copy link

ohenrik commented Dec 23, 2014

@mjlescano: Thanks! (and ofc thank you to @anthonyshort)

@maciejmyslinski
Copy link

@anthonyshort it's great, thank you!
Could you update this reset and add this line of code?

input {
    -webkit-appearance: none;
}

It resets default styling on ios according to this discussion
Thanks!

@cardex107
Copy link

Thanks!! for share this :D

@guy-kdm
Copy link

guy-kdm commented Nov 18, 2017

I'd add

input:focus,
button:focus,
select:focus {
      outline: 0;
    }

instead of just input.

@TCB13
Copy link

TCB13 commented Dec 14, 2017

It would be nice to see a simple repo with this code including all the suggestions!

@kmaas2000
Copy link

Been working on progressive web app & was stuck with iOS input issue for a long time & this reset saved my ass & mental well being...thank you!

@italodr
Copy link

italodr commented Mar 28, 2018

@anthonyshort @guy-kdm

/* Remove the stupid outer glow in Webkit */
input:focus
{
	outline:0;
}

This is not a stupid thing, it's meant for accessibility. You should not remove the outline. For more information you can refer to this a11yproject article

@AndinaDelSud
Copy link

Thanks for sharing! ;)

@lazarljubenovic
Copy link

https://gist.github.com/anthonyshort/552543#file-super-form-reset-css-L38

The only stupid thing here is the author who can't bother to check stuf before calling out others.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment