如何僅為圖像應用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）並使用一些位置：絕對和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/ 。