В HTML5 плейсхолдера с CSS отступы

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

в любом случае, вот код для 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) заполнителя, но если я попытаюсь отредактировать заполнение содержащего ввода, это разрушит дизайн ввода! вытаскивает волосы

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

placeholdertext input

редактировать:

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

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

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

116
css css3 google-chrome html5 webkit

12 ответов

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

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

215

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

input{
  text-indent: 10px;
}
39

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

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

22

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

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

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

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

line-height:normal;
2

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

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

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

Edit: найден плагин! С помощью jQuery.заполнитель.минута.js предоставляет вам как полные возможности стиля, так и поддержку кросс-браузера в придачу.

1

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

1

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

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

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

0

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

меня тянет даже не пытаться обойти это и просто ждать исправления. Это просто потребует больше усилий.

0

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

Я нашел другое решение.

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

0

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

0

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

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

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

0