Skip to content

Instantly share code, notes, and snippets.

@anthonyshort

anthonyshort/Work in progress form reset.html

Created August 26, 2010 13:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anthonyshort/551393 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anthonyshort/551393 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Work in progress form reset.html
<!DOCTYPE html>
<html>
<head>
<style>
form
{
background:#eee;
padding:20px;
margin:60px auto;
width:400px;
}
/* You should always wrap form controls in something */
form > div
{
background:#ddd;
border-bottom:1px solid #000;
}
/* ----------------------------------------------------------------------------------------------------
The Form Reset
I haven't just applied a full box reset to everything, I've been specific with each
and every selector for a reason. It adds more CSS, but it makes it much, much clearer
what is happening. This makes it easier to understand and debug later on.
----------------------------------------------------------------------------------------------------*/
input,
label
{
/* Remember, the parents line-height attribute affects these elements now. */
display:inline-block;
/* Fixes some position issues */
vertical-align:middle;
}
/* Remove the stupid outer glow in Webkit */
input:focus
{
outline:0;
}
/* Most browsers have default form fonts, but they're all different. Lets make them the same. */
input,
button,
select,
textarea,
label
{
font:13px/21px Arial;
}
/* 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]
{
/* Webkit adds margin to the bottom */
margin:0;
/* FF adds 1px padding to the top and bottom */
/* IE8 BUG: It's needs padding all sides or none. If you have padding just on the top and bottom, the text won't be vertically centered */
padding:0;
/* Default borders have inconsistent heights. Use custom ones, use a background image or use none at all. */
border:0;
/* This way the text is vertically centred in everything */
/* Never add height to the input with this attribute */
height:1em;
/* It should ALWAYS be 1em high */
line-height:1 !important;
/* Fixes issues with many input types */
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
}
/* Button Controls
-----------------------------------------------*/
input[type=checkbox],
input[type=radio]
{
margin:0;
padding:0;
border:0;
/* Being speicifc about the sizes so it's consistent across all browsers */
width:13px;
height:13px;
/* So gecko renders like everyone else */
-moz-box-sizing:border-box;
}
/* File Uploads
-----------------------------------------------*/
input[type=file]
{
/* These rules will center the input correctly in all browsers */
height:1em;
line-height:1 !important;
vertical-align:baseline;
/* Webkit adds padding */
padding:0;
/* See further down for the styling of the button included with this control */
}
/* 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 */
input[type=search]::-webkit-search-decoration
{
display:none;
}
/* Buttons
-----------------------------------------------*/
button,
input[type="reset"],
input[type="button"],
input[type="submit"]
{
/* Stupid UA setting */
white-space:normal;
padding:0;
border:0;
/* Fix IE7 display bug */
overflow: visible;
/* Most UAs include a border around buttons that can't be taken off */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
/* Reset the line-height */
line-height:1;
/* Remember, the parents line-height attribute affects these elements now. */
display:inline-block;
/* Vertically center it */
vertical-align:middle;
}
/* IE freaks out if this rule is in the selector above */
::-webkit-file-upload-button
{
/* Stupid UA setting */
white-space:normal;
/* Reset */
padding:0;
border:0;
/* Fix IE7 display bug */
overflow: visible;
/* Most UAs include a border around buttons that can't be taken off. This is just being specific */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
/* Reset the line-height */
line-height:1;
/* Remember, the parents line-height attribute affects these elements now. */
display:inline-block;
/* Vertically center it */
vertical-align:middle;
}
/* Textarea
-----------------------------------------------*/
textarea
{
margin:0;
padding:0;
border:0;
/* This line height should match your designs baseline */
line-height:1.4;
/* The position of the label */
vertical-align:top;
/* Turn off scroll bars in IE unless needed */
overflow:auto;
}
/* Selects
-----------------------------------------------*/
select
{
margin:0;
border:0;
padding:0;
/* Being specific */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
/* Remember, the parents line-height attribute affects these elements now. */
display:inline-block;
/* Vertically center it */
vertical-align:middle;
}
select[multiple]
{
/* The position of the label */
vertical-align:top;
}
/* ----------------------------------------------------------------------------------------------------
Custom Design
These are really just some rules that you'll need to set every time. They aren't really part
of the reset.
----------------------------------------------------------------------------------------------------*/
::-webkit-input-placeholder
{
color:#ccc;
}
input,
button,
select,
textarea,
label
{
}
</style>
</head>
<body>
<form>
<div>
<label for="search">Search</label>
<input type="search" value="A search input field" recent="5" name="search" />
</div>
<div>
<label for="normal">Search</label>
<input type="text" value="A normal input field" />
</div>
<div>
<input type="checkbox" value="A normal input field" />
<label for="normal">Checkbox label</label>
<input type="checkbox" value="A normal input field" />
<label for="normal">Checkbox label</label>
<input type="checkbox" value="A normal input field" />
<label for="normal">Checkbox label</label>
</div>
<div>
<div class="checkbox">
<input type="checkbox" value="A normal input field" />
<label for="normal">Checkbox label</label>
</div>
<div class="checkbox">
<input type="checkbox" value="A normal input field" />
<label for="normal">Checkbox label</label>
</div>
<div class="checkbox">
<input type="checkbox" value="A normal input field" />
<label for="normal">Checkbox label</label>
</div>
</div>
<div>
<input type="radio" value="A normal input field" />
<label for="normal">Radio button label</label>
<input type="radio" value="A normal input field" />
<label for="normal">Radio button label</label>
<input type="radio" value="A normal input field" />
<label for="normal">Radio button label</label>
</div>
<div>
<label for="normal">Search</label>
<input type="submit" value="A Button" />
</div>
<div>
<label for="normal">Search</label>
<input type="file" value="A Button" />
</div>
<div>
<label for="normal">Search</label>
<select>
<option>Option</option>
</select>
</div>
<div>
<label for="normal">Search</label>
<select multiple>
<option>Option</option>
</select>
</div>
<div>
<label for="normal">Search</label>
<textarea></textarea>
</div>
<div>
<label for="normal">Search</label>
<button>Submit</button>
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment