HTML5 заполнитель css padding

Question

Я уже видел эту запись и перепробовал все, что мог, чтобы изменить отступы для моего заполнителя, но, увы, похоже, он просто не хочет сотрудничать.

В любом случае,Вот код для CSS.( EDIT : это сгенерированный CSS из sass)

#search {
  margin-top: 1px;
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

#search form {
  position: relative;
}

#search input {
  padding: 0 10px 0 29px;
  color: #555555;
  border: none;
  background: url('/images/bg_searchbar.png?1296191141') no-repeat;
  width: 180px;
  height: 29px;
  overflow: hidden;
}

#search input:hover {
  color: #00ccff;
  background-position: 0px -32px;
}

А вот простой HTML:

<div id="search">
  <form>
    <input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
  </form>
  <div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
    <ul id="search-results" class="dropdown">
    </ul>
  </div>
</div>

Довольно просто?по какой-то причине заполнитель отключен, но при попытке ввода в поле ввода текст выравнивается.Кажется, что вы можете изменить только цвет (для webkit) заполнителя, но если я попытаюсь отредактировать заполнение содержащего ввода, это разрушит дизайн ввода! вырывает волосы

Вот экраны заполнителя и поля ввода с вводом текста:

РЕДАКТИРОВАТЬ :

Пока я прибегнул к этому плагину jquery .

Он работает прямо из коробки и исправляет проблему с моим хромом.Я все еще хотел бы раскрыть, в чем проблема (если это связано с МОИМ хромом или чем-то подобным)

Я почти уверен, что это не стили, так как Джон Каттерфельд воспроизвел это без проблем, поэтому я 'Я надеюсь, что кто-то еще может указать мне правильное направление относительно того, почему это происходит со мной (мой клиент также Chrome. Так что это, вероятно, является родным для Chrome / OSX, если Джон использует Windows)

Answer 1

У меня такая же проблема.

Я исправил это, убрав высоту строки из моего ввода. Проверьте, есть ли высота линии, которая вызывает проблему

Answer 2

У меня была похожая проблема, моя проблема была с боковым отступом, а решение было с отступом текста, я не осознавал, что отступ текста влияет на положение стороны заполнителя.

input{
  text-indent: 10px;
}

Answer 3

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

input::-webkit-input-placeholder { /* WebKit browsers */
  line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  line-height: 1.5em;
}

Answer 4

line-height: normal; 

у меня сработало;)

Answer 5

У меня была проблема, которая появляется только в Internet Explorer.Поле ввода было стилизовано

height:38px;
line-height:38px;

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

Мое решение было установить:

line-height:normal;

Answer 6

Настройка line-height: 0px; исправлена ​​для меня в Chrome

Answer 7

Удаление высоты строки действительно приводит ваш текст в соответствие с текстом-заполнителем, но это не решает вашу проблему должным образом, так как вам нужно адаптировать свой дизайн к этому недостатку (это не ошибка). Добавление вертикального выравнивания тоже не поможет. Я не пробовал во всех браузерах, но в Safari 5.1.4 он точно не работает.

Я слышал об исправлении jQuery для этого, которое заключается не в поддержке кросс-браузерного заполнителя (jQuery.placeholder), а для стилизации заполнителей, но я пока не нашел его.

Тем временем вы можете разрешить таблицу на этой странице , которая показывает поддержку различных стилей браузером для различных стилей.

Редактировать: Нашел плагин! jquery.placeholder.min.js предоставляет вам как полные возможности стайлинга, так и кросс-браузерную поддержку при заключении сделки.

Answer 8

Если вы хотите переместить текст заполнителя вправо и оставить курсор на пустом месте, вам нужно добавить пробелы в начало атрибута заполнителя:

<input type="email" placeholder="  Your email" />

Answer 9

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

... Chrome (v20-30) реализует почти все стили, но с серьезным предостережением - стили заполнителей не меняют размер поля ввода, поэтому избегайте таких вещей, как высота строки и отступы сверху или снизу.

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

Answer 10

Удалить высоту строки или установить с помощью отступов ... это работает во всех браузерах