Clear user search input for search="text" using CSS - html

Question

I would like add a clear input text feature to the existing search functionality. When user click the cross animation it should clear the input text instead of moving the arrows away. I have added display:none at last not valid, but not working as expected. Can someone please assist on how to implement this functionality ?.
.search-box {
position: relative;
display: inline-block;
border: 2px solid #000;
border-radius: 20px;
float:right;
}
.search-box input[type="text"] {
-webkit-appearance: none;
position: relative;
display: block;
width: 20px;
height: 20px;
margin: 0;
padding: 5px;
border: none;
border-radius: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: none;
box-shadow: none;
z-index: 1;
-webkit-transition: all 0.5s ease-out 0.5s;
transition: all 0.5s ease-out 0.5s;
outline: none;
}
.search-box input[type="text"]:focus {
width: 280px;
height: 30px;
margin-right: 20px;
-webkit-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
.search-box input[type="text"]:focus + span::before {
height: 14px;
margin: -22px 0 0 -15px;
-webkit-transition: all 0.2s ease-out 0.5s;
transition: all 0.2s ease-out 0.5s;
}
.search-box input[type="text"]:focus + span::after {
visibility: visible;
margin: -22px 0 0 -15px;
-webkit-transition: all 0.2s ease-out 0.7s;
transition: all 0.2s ease-out 0.7s;
}
.search-box span {
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
z-index: 10;
}
.search-box span::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 8px;
margin: -4px 0 0 0;
background-color: #000;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.2s ease-out 0.2s;
transition: all 0.2s ease-out 0.2s;
}
.search-box span::after {
content: '';
visibility: hidden;
display: block;
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 14px;
margin: -36px 0 0 5px;
background-color: #000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}
.search-box:not(:valid) ~ span {
display: none;
}
<form name="search">
<label class="search-box">
<input type="text" />
<span></span>
</label>
</form>
https://jsfiddle.net/0wansxza/

Answer 1

You could do it using jQuery with that $('#element').val('');.
jQuery(document).ready(function(){
jQuery('.search-box input[type="text"]').focusout(function() {
jQuery(this).val('');
})
});
.search-box {
position: relative;
display: inline-block;
border: 2px solid #000;
border-radius: 20px;
float:right;
}
.search-box input[type="text"] {
-webkit-appearance: none;
position: relative;
display: block;
width: 20px;
height: 20px;
margin: 0;
padding: 5px;
border: none;
border-radius: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: none;
box-shadow: none;
z-index: 1;
-webkit-transition: all 0.5s ease-out 0.5s;
transition: all 0.5s ease-out 0.5s;
outline: none;
}
.search-box input[type="text"]:focus {
width: 280px;
height: 30px;
margin-right: 20px;
-webkit-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
.search-box input[type="text"]:focus + span::before {
height: 14px;
margin: -22px 0 0 -15px;
-webkit-transition: all 0.2s ease-out 0.5s;
transition: all 0.2s ease-out 0.5s;
}
.search-box input[type="text"]:focus + span::after {
visibility: visible;
margin: -22px 0 0 -15px;
-webkit-transition: all 0.2s ease-out 0.7s;
transition: all 0.2s ease-out 0.7s;
}
.search-box span {
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
z-index: 10;
}
.search-box span::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 8px;
margin: -4px 0 0 0;
background-color: #000;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.2s ease-out 0.2s;
transition: all 0.2s ease-out 0.2s;
}
.search-box span::after {
content: '';
visibility: hidden;
display: block;
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 14px;
margin: -36px 0 0 5px;
background-color: #000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}
.search-box:not(:valid) ~ span {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="search">
<label class="search-box">
<input type="text" />
<span></span>
</label>
</form>

Answer 2

Using Just CSS. I had to modify your markup a little. To clear the input field i had to add a button that resets the form when clicked. See my code and comments below. Hope it helps
.search-box {
position: relative;
display: inline-block;
border: 2px solid #000;
border-radius: 20px;
float:right;
}
.search-box input[type="text"] {
-webkit-appearance: none;
position: relative;
display: block;
width: 20px;
height: 20px;
margin: 0;
padding: 5px;
border: none;
border-radius: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: none;
box-shadow: none;
z-index: 11;/**Changed This**/
-webkit-transition: all 0.5s ease-out 0.5s;
transition: all 0.5s ease-out 0.5s;
outline: none;
}
/**Updated the below codes**/
.search-box input[type="text"]:focus,
.search-box .btn:focus + input{
width: 280px;
height: 30px;
margin-right: 30px;
-webkit-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
/**Updated the below codes**/
.search-box input[type="text"]:focus + span::before,
.search-box .btn:focus + input[type="text"] + span::before{
height: 14px;
margin: -22px 0 0 -15px;
-webkit-transition: all 0.2s ease-out 0.5s;
transition: all 0.2s ease-out 0.5s;
}
/**Updated the below codes**/
.search-box input[type="text"]:focus + span::after,
.search-box .btn:focus + input[type="text"] + span::after{
visibility: visible;
margin: -22px 0 0 -15px;
-webkit-transition: all 0.2s ease-out 0.7s;
transition: all 0.2s ease-out 0.7s;
}
.search-box span {
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
z-index: 10;
}
.search-box span::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 8px;
margin: -4px 0 0 0;
background-color: #000;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.2s ease-out 0.2s;
transition: all 0.2s ease-out 0.2s;
}
.search-box span::after {
content: '';
visibility: hidden;
display: block;
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 14px;
margin: -36px 0 0 5px;
background-color: #000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}
/**
.search-box:not(:valid) ~ span {
display: none;
}**/
/**Added the below codes**/
.search-box .btn {
position: absolute;
top: 0;
right: 0;
bottom: 0;
background: transparent;
border: 0;
outline: 0;
width: 30px;
cursor: pointer;
z-index: 11;
}
<form name="search">
<label class="search-box">
<!--Added the button to clear the field on click-->
<button class="btn" type="reset"></button>
<input type="text" />
<span></span>
</label>
</form>