Update static/searchButton.css

static/searchButton.css

@@ -1,98 +1,43 @@
-body {
-	font-family: sans-serif;
-	background-color: #111;
-}
 
-.button {
-	display: inline-block;
-	margin: 4px 2px;
-	background-color: #444;
-	font-size: 14px;
-	padding-left: 32px;
-	padding-right: 32px;
-	height: 50px;
-	line-height: 50px;
-	text-align: center;
-	color: white;
-	text-decoration: none;
-	cursor: pointer;
-	-moz-user-select: none;
-	-khtml-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.button:hover {
-	transition-duration: 0.4s;
-	-moz-transition-duration: 0.4s;
-	-webkit-transition-duration: 0.4s;
-	-o-transition-duration: 0.4s;
-	background-color: white;
-	color: black;
-}
-
-.search-container {
-	position: relative;
-	display: inline-block;
-	margin: 4px 2px;
-	height: 50px;
-	width: 50px;
-	vertical-align: bottom;
-}
-
-.mglass {
-	display: inline-block;
-	pointer-events: none;
-	-webkit-transform: rotate(-45deg);
-	-moz-transform: rotate(-45deg);
-	-o-transform: rotate(-45deg);
-	-ms-transform: rotate(-45deg);
-}
-
-.searchbutton {
-	position: absolute;
-	font-size: 22px;
-	width: 100%;
-	margin: 0;
-	padding: 0;
-}
-
-.search:focus + .searchbutton {
-	transition-duration: 0.4s;
-	-moz-transition-duration: 0.4s;
-	-webkit-transition-duration: 0.4s;
-	-o-transition-duration: 0.4s;
-	background-color: white;
-	color: black;
-}
-
-.search {
-	position: absolute;
-	left: 49px; /* Button width-1px (Not 50px/100% because that will sometimes show a 1px line between the search box and button) */
-	background-color: white;
-	outline: none;
+#tomeasureSearchInput,#relevantSearchInput {
+	-webkit-appearance: textfield;
+	-webkit-box-sizing: content-box;
+	font-family: inherit;
+	font-size: 100%;
+  }
+  
+  input::-webkit-search-decoration,
+  input::-webkit-search-cancel-button {
+	display: none;
+
+  }
+  
+#tomeasureSearchInput,#relevantSearchInput{
+	background:  url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
+	/* border: solid 1px #ccc; */
+	padding: 9px 7px 9px 32px;
+	width:0;
+	height: 6px;
+	-webkit-border-radius: 10em;
+	-moz-border-radius: 10em;
+	border-radius:3px;
+	-webkit-transition: all .5s;
+	-moz-transition: all .5s;
+	transition: all .5s;
+	margin-left: 18ch ;
+	margin-top: 6px;
 	border: none;
-	padding: 0;
-	width: 0;
-	height: 100%;
-	z-index: 10;
-	transition-duration: 0.4s;
-	-moz-transition-duration: 0.4s;
-	-webkit-transition-duration: 0.4s;
-	-o-transition-duration: 0.4s;
-}
-
-.search:focus {
-	width: 363px; /* Bar width+1px */
-	padding: 0 16px 0 0;
-}
-
-.expandright {
-	left: auto;
-	right: 49px; /* Button width-1px */
-}
-
-.expandright:focus {
-	padding: 0 0 0 16px;
-}
+  }
+  #relevantSearchInput{
+margin-left: 172px;
+
+  }
+#tomeasureSearchInput:focus , #relevantSearchInput:focus {
+	width: 191px;
+	background-color: #fff;
+	border-color: #1b1d1c;
+	box-shadow: 0 0 5px rgba(109, 207, 246, .5);
+  }
+  #relevantSearchInput:focus {
+	width:165px;
+  }