Override the -webkit-search-cancel-button
23,093
Solution 1
1) Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML
2) for chrome
CSS
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
height: 10px;
width: 10px;
background: red;
/* Will place small red box on the right of input (positioning carries over) */
}
Solution 2
An example for Chrome:
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 24px;
width: 24px;
margin-left: .4em;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
cursor: pointer;
}
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Author by
Admin
Updated on September 04, 2021Comments
-
Admin almost 3 years
I'm trying to override the small (x) that appears in the search bar, to have it do more than clear the search
Currently this is my search bar: HTML:
<input type="search" class="form-control" id="inputSearch" placeholder="Search for node" onchange="searchForNode(this)"></div>
CSS:
#inputSearch::-webkit-search-cancel-button{ position:relative; right:20px; }
Any ideas? Thanks.