Skip to content

Instantly share code, notes, and snippets.

@jasonmelgoza

jasonmelgoza/formalize.css

Created August 2, 2010 16:07
Show Gist options
  • Save jasonmelgoza/504857 to your computer and use it in GitHub Desktop.
Save jasonmelgoza/504857 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
formalize.css
/*
Form Elements
-- Styled to look like native Safari on OS X.
-- Drop-down <select> menus are unaffected.
-- Buttons are unaffected. Native OS style.
*/
::-webkit-input-placeholder {
color: #000;
}
input,
button,
select,
textarea {
margin: 0;
outline: 0;
}
button,
input[type=reset],
input[type=submit],
input[type=button] {
display: inline-block;
font-size: 11px;
overflow: visible;
width: auto;
}
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] {
height: 16px;
width: 132px;
}
input[type=search] {
-webkit-appearance: none;
-webkit-box-sizing: content-box;
}
input[type=search]::-webkit-search-decoration {
display: none;
}
textarea,
select[multiple],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week] {
/*
Copy this image to your own server...
*/
background: #fff url(http://host.sonspring.com/_misc/input_shadow.png) repeat-x;
border: 1px solid;
border-color: #848484 #c1c1c1 #e1e1e1;
color: #000;
margin: 0;
padding-top: 2px;
padding-left: 3px;
padding-right: 3px;
font: 13px Arial, sans-serif;
vertical-align: top;
}
select[multiple] {
padding: 0;
}
textarea {
max-width: 100%;
min-width: 100%;
width: 100%;
}
optgroup {
color: #000;
font-style: normal;
font-weight: normal;
}
Raw
gistfile2.txt
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/*
Form Elements
-- Styled to look like native Safari on OS X.
-- Drop-down <select> menus are unaffected.
-- Buttons are unaffected. Native OS style.
*/
::-webkit-input-placeholder {
color: #000;
}
input,
button,
select,
textarea {
margin: 0;
outline: 0;
}
button,
input[type=reset],
input[type=submit],
input[type=button] {
display: inline-block;
font-size: 11px;
overflow: visible;
width: auto;
}
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] {
height: 16px;
width: 132px;
}
input[type=search] {
-webkit-appearance: none;
-webkit-box-sizing: content-box;
}
input[type=search]::-webkit-search-decoration {
display: none;
}
textarea,
select[multiple],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week] {
/*
Copy this image to your own server...
*/
background: #fff url(input_shadow.png) repeat-x;
border: 1px solid;
border-color: #848484 #c1c1c1 #e1e1e1;
color: #000;
margin: 0;
padding-top: 2px;
padding-left: 3px;
padding-right: 3px;
font: 13px Arial, sans-serif;
vertical-align: top;
border-radius:5px;
-o-border-radius:5px;
-icab-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
select[multiple] {
padding: 0;
}
textarea {
max-width: 100%;
min-width: 100%;
width: 100%;
}
optgroup {
color: #000;
font-style: normal;
font-weight: normal;
}
/*my addtions*/
div.search input { color: #aaa; }
div.search input:focus { color: #151515; border: 1px solid red; }
</style>
</head>
<body>
<div class="search">
<form id="search" action="/search">
<input id="search-text" type="text" name="q" value="Search">
<input id="search-btn" type="image" src="http://dribbble.com/images/btn-search-go.gif" alt="Go">
<p></p>
<div class="text" style="width: 400px;">
<label for="comment">Email</label>
<input type="email" value="Your Email" />
<p></p>
<label for="url">URL</label>
<input type="url" value="Your URL" />
<p></p>
<label for="comment">Thoughts</label>
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>
</div>
</form>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment