Размещение курсора с изображением в стиле CSS

Question

У меня есть стилизованное окно поиска, в котором используется фон, всякий раз, когда я щелкаю по нему, курсор мигает больше, чем текстовое поле, пока я не введу текст в нужном размере.

Это HTML -

<div class="row2 zero_padMarg floatRight">
 <label for="srcTxt" title="search form">search</label>
 <input type="text" id="srchCom" name="srcTxt" class="validate[required,length[3,75]] text-input txtBox">
 <input type="submit" class="searchSubBtn" value="submit" title="submit search" name="submit">
</div>

.searchBlock input#srchCom {
    background:url("../images/srchSml.gif") no-repeat scroll left top transparent;
    border-style:none;
    font-size:11px;
    height:23px;
    line-height:normal;
    overflow:hidden;
    text-indent:24px;
    vertical-align:bottom;
    width:160px;
}

Есть идеи по поводу кросс-браузерного решения?

Спасибо за вашу помощь Пол

Answer 1

Я бы попробовал использовать отступы, чтобы предположить, что высота содержимого равна размеру шрифта. Добавить:

padding: 6px 0;

... и уменьшите общую высоту до такой же высоты, как размер шрифта:

height: 11px;

Это выглядит для меня как ошибка Firefox.

Answer 2

Ну, на самом деле я попытался удалить высоту текстового поля и дал соответствующие отступы для верха и низа, это очень хорошо работало как для IE, так и для Firefox.

Answer 3

Вы не можете изменить рост <input>?