Skip to content

Instantly share code, notes, and snippets.

@Gwash3189

Gwash3189/index.html

Created September 20, 2015 06:49
Show Gist options
  • Save Gwash3189/0cd1b8775c186e2d4be3 to your computer and use it in GitHub Desktop.
Save Gwash3189/0cd1b8775c186e2d4be3 to your computer and use it in GitHub Desktop.
Download ZIP
mobile search input
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
.Form--search-input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 1rem;
padding-left: 1.78rem;
border: 0.1rem solid #e3e3e3;
outline: none;
border-radius: 1rem;
height: 1.9rem;
font-size: 0.9rem;
cursor: pointer;
transition: border-color 0.5s ease;
transition: width 0.5s ease;
}
.Form--search-input:focus {
border-color: #42b983;
width: 12rem;
cursor: text;
padding-right: 1rem;
}
.Form--search-icon {
color: #C7C7C7;
margin-left: -1.7rem;
pointer-events: none;
transition: opacity 0.3s ease;
}
.Form--search-input:focus + .Form--search-icon {
opacity: 0;
}
</style>
<body>
<form class='Form--search'>
<input type="text" class="Form--search-input" autocomplete='off' autocorrect='off' autocapitalize='off'>
<i class="Form--search-icon fa fa-search"></i>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment