switched to input[type='search']

1 files changed, 21 insertions, 4 deletions

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 869ae89..cda0b19 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -43,7 +43,7 @@ html, body {
   color: #FFFFFF;
 }
 
-#search input[type='text'] {
+#search input[type='search'] {
   display: block;
   background-color: #f6695e;
   color: inherit;
@@ -57,16 +57,33 @@ html, body {
   transition: box-shadow 200ms ease-in-out;
 }
 
-#search input[type='text']:focus {
+#search input[type='search']:focus {
   background-color: #FFFFFF;
   color: #212121;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
-#search input[type='text']:focus + button {
+#search input[type='search']:focus + button {
   color: #212121;
 }
 
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+input[tupe="search"]::-ms-clear {
+  width: 0;
+  height: 0;
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
+
 /* WebKit, Blink, Edge */
 input::-webkit-input-placeholder {
   color: #FFCDD2;
@@ -282,7 +299,7 @@ body.no-input #week-selector {
     transform: translateY(-75%);
   }
 
-  body.no-input #search input[type='text'] {
+  body.no-input #search input[type='search'] {
     background-color: #FFF;
   }