jasonmelgoza/formalize.css

## 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;
}

## 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>
	/*
	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;
	}
	<!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>