如何在<input>活動狀態下顯示一個關閉圖標

Question

我有一個帶有搜索圖標的輸入欄。當按下輸入場/聚焦我想有一個關閉圖標上的輸入框顯示爲下面的圖片

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

試試在像這樣 - 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; 
}