如何申請CSS類圖像只

Question

.calendarList { 
     background-image: url('/resource3/hpsc/common/images/calendar.png'); 
     background-position: 135px 50%; 
     background-repeat: no-repeat; 
     cursor:pointer; 
} 

<input type="text" id="toDatepicker" class="calendarList" name="searchEndDate" size="20" > 

這裏的CSS類應用完全輸入文本字段，當鼠標移到文本字段，將光標顯示手符號的總輸入字段， 我什麼顯示該圖像的手形符號僅適用於整個文本字段。

Answer 1

我不認爲你想要做什麼是可能的。

也許您可以將圖像添加爲常規圖像（而不是bg）並使用某個位置：absolute和z-index將它放在文本框的後面或前面。

Answer 2

我想你可以用JavaScript來實現它，但這將是一個相當複雜的解決方案。如果您將圖片製作爲標籤而不是背景圖片並將其放置在輸入字段的頂部，則會更容易。

<input type="text" id="toDatepicker" class="calendarList" name="searchEndDate" size="20" > 
<label for="toDatepicker" id="datepickerLabel> 
    <img src="/resource3/hpsc/common/images/calendar.png" /> 
</label> 

CSS：

#datepickerLabel { 
    position:relative; 
    left:-20px; 
    cursor:pointer; 
} 

的演示中看到http://jsfiddle.net/tNwTz/。