Skip to content
Permalink
Browse files
Don't remove search input cancel button in Chrome/Safari
Fix #685
  • Loading branch information
necolas committed Feb 8, 2018
1 parent 9f4876b commit f7c98c4c859c15363763f10a439b63d85b9afba0
Show file tree
Hide file tree
Showing 3 changed files with 2 additions and 8 deletions.
@@ -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

@@ -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;
}
@@ -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;">

0 comments on commit f7c98c4

Please sign in to comment.