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

necolas · necolas · commit f7c98c4c859c · 2018-02-08T15:50:08.000-08:00
Fix #685
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;">

Original file line number	Diff line number	Diff line change
`@@ -285,10 +285,9 @@ textarea {`
`285`	`285`	`}`
`286`	`286`
`287`	`287`	`/**`
`288`		`- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.`
	`288`	`+ * Remove the inner padding in Chrome and Safari on macOS.`
`289`	`289`	`*/`
`290`	`290`
`291`		`-[type="search"]::-webkit-search-cancel-button,`
`292`	`291`	`[type="search"]::-webkit-search-decoration {`
`293`	`292`	`-webkit-appearance: none;`
`294`	`293`	`}`