I want to customize how the clear input option functions. Normally, when you click on the X clear button, it clears the search input field.
Instead of clearing the search input, I would like the clear button to trigger a page reload.
This is the X button that I am referring to:
https://i.sstatic.net/U4Qfm.png
I have managed to create a clickable button inside the input box that accomplishes this, but I prefer to use the X button that appears in bootstrap once the user starts typing.
Javascript:
$('#clear').click(function () {
$('#input-outer input').val('');
window.location.reload();
});
HTML:
<div id="input-outer">
<input type="text">
<div id="clear">X</div>
</div>
CSS:
body {
font-family:"Tahoma";
}
#input-outer {
height:2em;
width:15em;
border:1px #e7e7e7 solid;
border-radius:20px;
}
#input-outer input {
height:2em;
width:80%;
border:0px;
outline:none;
margin:0 0 0 10px;
border-radius:20px;
color:#666;
}
#clear {
position:relative;
float:right;
height:20px;
width:20px;
top:5px;
right:5px;
border-radius:20px;
background:#f1f1f1;
color:white;
font-weight:bold;
text-align:center;
cursor:pointer;
}
#clear:hover {
background:#ccc;
}
Instead of using this:
<div id="clear">X</div>
I'm attempting to target, but struggling:
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
Here's a JSFiddle link that may help clarify my request: https://jsfiddle.net/mcmacca002/57mx3beq/1/
Thank you