Уменьшение размера курсора по умолчанию перед вводимым текстом

#css #internet-explorer #firefox #internet-explorer-8 #cross-browser

#css #internet-explorer #firefox #internet-explorer-8 #кроссбраузерный

Вопрос:

У меня есть несколько полей ввода, которые получают разные результаты из разных браузеров. Вот css для ящиков:

 .InputBox
{
    background-image: url(../text_field.png);
    height: 25px;
    width: 192px;
    z-index:300;
    position:absolute;
    border: 0;
    padding: 0 0 0 3px;
    background-color:transparent;
    font-size: 12px;
}
  

Я предполагал, что для того, чтобы курсор соответствовал размеру / расположению текстового поля, мне нужно будет только добавить padding и font-size вызовы. К сожалению, это не тот случай. На данный момент вот проблемы, с которыми я сталкиваюсь в браузере

Chrome Отсутствует

Safari Нет

В IE8 курсор перемещен на высокий уровень, не отображается перед полем, пока не будет введен текст. Текст располагается не по центру, а ближе к верху

Размер курсора в Firefox слишком велик, когда текст не вводится. После ввода текста курсор в порядке. Если текст удален, курсор становится слишком большим.

Как настроить начальный размер курсора в Firefox? Я предполагал, что это будет соответствовать font-size , но я думаю, что это не так. Кроме того, как я мог бы настроить padding в IE, не изменяя его в других, и почему курсор будет отображаться за текстовым полем, когда текст не введен?

Ответ №1:

Это ошибка, которую я исправил в Firefox 4. В Firefox 4 размер курсора всегда равен размеру текста, который будет введен. Мы берем этот размер из свойства font-size. В Firefox 3.6 и более ранних версиях размер определяется высотой блока, содержащего курсор, если внутри него нет текста.

Комментарии:

1. Я думал, что это основано на высоте. Единственная проблема заключается в том, как мне отредактировать высоту, не удаляя часть моего текстового поля? Это background-image так что уменьшение высоты приведет к удалению части поля

2. Вы можете попробовать уменьшить height и компенсировать правильное положение, настроив margin (наиболее вероятно margin-top ) свойство.