Неправильная позиция курсора в элементе ввода Firefox (поле поиска) - PullRequest
Новая
       33

Неправильная позиция курсора в элементе ввода Firefox (поле поиска)

0 голосов
/ 06 декабря 2011

У меня проблемы с курсором в окне поиска, которое отображается слишком далеко в Firefox, тогда как в Chrome и Safari оно выглядит нормально. CSS использует Modernizr для отображения границы, где это возможно, поэтому проблема не касается IE, который обслуживается простым квадратным прямоугольником.

Вот HTML: 

<form action="/search-results/" id="search" role="search">
<input type="search" placeholder="Search this site here" name="q" results=5 id="q" autocomplete="off" size="31"/>
</form>

CSS выглядит следующим образом: 

input::-webkit-input-placeholder {
    color:    #999;
}
input:-moz-placeholder {
    color:    #999;

для отображения заполнителя и 

.borderradius #search input#q {
    width: 180px;
    height: 20px;
    font: 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    margin: 0;
    padding: 0;
    background: #fcfcfc;
    border: 1px solid #d1d1d1;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.no-borderradius #search input#q {
    border: 1px solid #ccc;
    background: #eee;
    font: inherit;
    width: 170px;
    height: 20px;
    padding: 0 0 0 8px
}

, чтобы оформить коробку.

Я также добавил это: 

/* Remove default input type="search styling */
input[type="search"] {
  -webkit-appearance: textfield; /* You could also use none */
}

(который я видел в этой статье ), который приводит к удалению «принудительного» стиля в окне поиска Webkit - то есть его можно последовательно отображать в Mozilla с правильным стилем.

При добавлении атрибута results=5 во входной тег, хотя в настоящее время он не проверяется, в Webkit отображается увеличительное стекло.

Приведенный выше код также можно проверить онлайн на моем сайте .

Поле поиска отображается следующим образом:

Safari

Safari

Chrome

Chrome

Firefox

Firefox

Firefox не отображает увеличительное стекло, но это нормально. С другой стороны, хотя настройка поля и / или отступов на поле может исправить неправильное (слишком левое) отображение курсора Firefox, это обязательно происходит за счет (недопустимой) стоимости его слишком сильного перемещения в браузерах Webkit. И я не нашел способа нацеливания только на Mozilla в этом случае. Любые предложения приветствуются ...

Ответы [ 2 ]

3 голосов
/ 06 декабря 2011

Если честно, Firefox не отображает неправильную позицию курсора.Если вы удалите недействительный атрибут results, вы увидите, что позиция курсора находится в том же месте в веб-наборе.

Я не уверен, какие отступы / поля вы пробовали, но заполнение ниже выглядело хорошо вбраузеры.Свойства box-sizing: используются для того, чтобы ввод работал одинаково во всех браузерах и не увеличивал размер окна с дополнительными отступами. 

.borderradius #search input#q{
    padding: 0 0 0 6px;
    -webkit-box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    box-sizing: padding-box;
}
1 голос
/ 06 декабря 2011

Это сложно - мне кажется, у нас есть какой-то путь, чтобы родная стилизация новых элементов формы работала хорошо в кросс-браузерной среде. Я собрал скрипку , в которой показан код, необходимый для правильного отображения результатов поиска в браузерах WebKit и Firefox.

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

По сути, я переопределил собственный стиль браузера, используя этот код: 

-moz-appearance: none;
-webkit-appearance: none;

Затем я использовал свойство -moz-padding-start (кто знал?), Чтобы добавить отступ слева только для Firefox.

Так что, хотя это работает, далеко не идеально прыгать через эти обручи. Примечание к ответу @ tw16: -moz-box-sizing в настоящее время используется даже самой последней версией Firefox, но, вероятно, будет заменено версией без префикса в будущем, что потенциально может нарушить это решение. Чтобы быть справедливым, -moz-padding-start предположительно будет заменен аналогичным образом в какой-то момент в будущем, хотя CSS Writing Module кажется более неясным (по крайней мере мне).

...