CSS content Property not working as expected in firefox - html

Question

What i am doing is that in search box when user enter a search term, i display a close button ('x' character to be specific, embedded as content after reset button) to clear the contents of search box.
It works fine in both Chrome and IE but not in firefox.
Any kind of help would be highly appreciated.
.search-box,.close-icon,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: absolute;
z-index:1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: black;
font-weight: normal;
font-size: 12px;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset"></button>
</form>
</div>

Answer 1

This code should help you
.search-box,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box
{
width:300px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent,
display: inline-block;
vertical-align: middle;
outline: 0;
position: absolute;
top:19px;
left:305px;
z-index:1;
padding: 1px 2px;
border-radius: 50%;
text-align: center;
color: black;
font-weight: normal;
font-size: 12px;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset">X</button>
</form>
</div>
NOTE : set your .search-box width and according to it set left of your .close-icon

Answer 2

Try this code: Hope this solve your problem. Adjust "outer_box" class for width.
<style>
.search-box, .search-wrapper {
padding: 10px;
box-sizing: border-box;
}
.search-box {
position:relative;
width:100%;
}
.outer_boxs{
position:relative;
width:60%;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent,
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
position: absolute;
right:5px;
top: 10px;
background:#f2f2f2;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
</style>
<div class="search-wrapper">
<form>
<div class="outer_boxs" >
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset">X</button>
</div>
</form>
</div>