How to have a close icon show up on <input> active state - css

Question

I have a input field with search icon. When the input field is pressed/focused I want to have a close icon show up on the input box as in the below image
jsfiddle
<div id="search-controls">
<input type="text" class="search-box in-acvtive" placeholder="e.g. restaurant name, cuisine" />
</div>
#search-controls {
height: 68px;
padding: 5px;
}
#search-controls input.ui-input-text {
height: 26px;
background: url('../img/search-icon.png') 99.5% center no-repeat;
background-size: 16px 14px;
border: 1px solid #999;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: inset 0px 5px 10px -5px #BBB;
-webkit-box-shadow: inset 0px 5px 10px -5px #BBB;
box-shadow: inset 0px 0px 5px 10px -5px #BBB;
padding: 6px 5px 0 5px;
margin: 0 0 5px 0;
font-size: 15px;
line-height: 15px;
}
#search-controls input.ui-input-text.ui-focus {
border: 1px solid #9E0249;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: none;
moz-box-shadow: none;
-webkit-box-shadow: none;
background: url('../img/search-active-icon.png') 100% center no-repeat;
}

Answer 1

Try something like this - DEMO
HTML
<div id="header" class="search" data-role="header" data-position="fixed">
<div id="search-controls">
<input type="text" class="search-box" placeholder="e.g. restaurant name, cuisine" />
<span> x </span>
</div><!-- /search-controls -->
</div>​
CSS
#search-controls span {
display: none;
position: absolute;
top: 11px;
right: 35px;
height: 22px;
width: 22px;
background: #bbb;
border-radius: 20px;
color: #fff;
font: 400 20px/22px 'Lucida Console', sans-serif;
text-align: center;
border: 1px solid #bbb;
cursor: pointer;
}
#search-controls input.ui-input-text.ui-focus ~ span {
display: block;
}