Responsive search box

search

<div id="pattern" class="pattern">
  	<form role="search" method="get" id="searchform" action="" method="post" class="f searchform">
			 <label class="is-vishidden">Search the site</label>
			 <input type="search" placeholder="Search the site" name="s" id="s" />
			 <input type="submit" class="btn search-submit" id="searchsubmit" value="Search">
		</form>
</div>

searchbox.sass

.f { position: relative; }
.is-vishidden {
  position: absolute;
	overflow: hidden;
	width: 1px;
	height: 20px;
	padding: 0;
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	}

.pattern {
	padding: 1em;
	margin-top: 50px;
	}

input {
	display: block;
	border: 1px solid #ccc;
	&[type=search] {
	    width: 100%;
	    height: 3.2em;
	    padding: 1em;
	    padding-right: 7em;
	    position: relative;
	   	top: 0;
	   	border-radius: 4px;
		moz-border-radius: 4px;
		webkit-border-radius: 4px;
	}
	&[type=submit] {
	  position: absolute;
	  right: 0.75em;
		top: 0.5em;
	 	bottom: 0.5em;
		z-index: 1;
		width: 6em;
		padding: 0;
		cursor: pointer;
		background: #e0e0e0;
		border-radius: 4px;
		moz-border-radius: 4px;
		webkit-border-radius: 4px;
		&:hover {background: #ccc;}
		}
	}