Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* ----------------------------------------------------------------------------------------------------
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

This comment has been minimized.

Copy link

@syberknight syberknight commented Oct 8, 2014

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

This comment has been minimized.

Copy link

@mjlescano mjlescano commented Oct 10, 2014

Great! thanks :)

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

@ohenrik

This comment has been minimized.

Copy link

@ohenrik ohenrik commented Dec 23, 2014

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

@maciejmyslinski

This comment has been minimized.

Copy link

@maciejmyslinski maciejmyslinski commented Oct 6, 2016

@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

This comment has been minimized.

Copy link

@cardex107 cardex107 commented Jul 12, 2017

Thanks!! for share this :D

@guy-kdm

This comment has been minimized.

Copy link

@guy-kdm guy-kdm commented Nov 18, 2017

I'd add

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

instead of just input.

@TCB13

This comment has been minimized.

Copy link

@TCB13 TCB13 commented Dec 14, 2017

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

@kmaas2000

This comment has been minimized.

Copy link

@kmaas2000 kmaas2000 commented Feb 24, 2018

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

This comment has been minimized.

Copy link

@italodr 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

This comment has been minimized.

Copy link

@AndinaDelSud AndinaDelSud commented Sep 4, 2018

Thanks for sharing! ;)

@lazarljubenovic

This comment has been minimized.

Copy link

@lazarljubenovic lazarljubenovic commented Feb 10, 2020

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
You can’t perform that action at this time.