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

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

Во всяком случае, вот код для CSS. ( РЕДАКТИРОВАТЬ : это сгенерированный 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 / OSX, если Джон использует Windows)

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

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

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

input{
  text-indent: 10px;
}

Если вы хотите сохранить высоту строки и сделать так, чтобы местозаполнитель был одинаковым, вы можете напрямую редактировать 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;
}

line-height: normal; 

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

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

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

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

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

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

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

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

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

line-height:normal;

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

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

http://jsfiddle.net/fLdQG/2/ (требуется веб-браузер)

Это работает для вас? Если нет, можете ли вы обновить скрипку с вашей точной разметкой и CSS?

Я заметил эту проблему в тот момент, когда я обновил Chrome для OS X до последней стабильной версии (9.0.597.94), так что это ошибка Chrome, и, надеюсь, будет исправлена.

Я испытываю искушение даже не пытаться обойти это и просто ждать исправления. Это просто будет означать больше работы по его устранению.

Заполнитель не затронут line-heightи paddingнесовместим в браузерах.

Я нашел другое решение, хотя.

VERTICAL-ALIGN, Вероятно, это единственный раз, когда это работает, но попробуйте это и пропустите множество строк кода CSS.

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

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

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

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

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

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

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

Угловой материал

<input matInput type="text" class="pl-2" placeholder="&nbsp;&nbsp;Email">

Не угловой материал

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>