Don't remove search input cancel button in Chrome/Safari

Fix #685
necolas · Feb 8, 2018 · f7c98c4c859c15363763f10a439b63d85b9afba0 · f7c98c4
1 parent 9f4876b
commit f7c98c4c859c15363763f10a439b63d85b9afba0
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -84,8 +84,7 @@ Chrome and Safari on Windows you can't control `border` properly. It will apply
 `border-width` but will only show a border color (which cannot be controlled)
 for the outer 1px of that border. Applying `-webkit-appearance: textfield`
 addresses these issues without removing the benefits of search inputs (e.g.
-showing past searches). Safari (but not Chrome) will clip the cancel button on
-when it has padding (and `textfield` appearance).
+showing past searches).
 
 ## Contributing
 

diff --git a/normalize.css b/normalize.css
@@ -285,10 +285,9 @@ textarea {
 }
 
 /**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ * Remove the inner padding in Chrome and Safari on macOS.
  */
 
-[type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }

diff --git a/test.html b/test.html
@@ -433,10 +433,6 @@ <h3 class="Test-it">should be styleable</h3>
   <div class="Test-run">
     <input type="search" style="border:1px solid #ADD8E6; padding:10px; width:200px;">
   </div>
-  <h3 class="Test-it">should not have a cancel button in Safari or Chrome</h3>
-  <div class="Test-run">
-    <input type="search" value="search">
-  </div>
   <h3 class="Test-it">should reference inherited color</h3>
   <div class="Test-run">
     <input type="text" placeholder="Text goes here" style="background-color: black; color: orange;">