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

106

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

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

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

Изображение 386Изображение 387

ИЗМЕНИТЬ

В настоящее время я прибегал к этому jquery plugin.

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

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

  • 2
    Можете ли вы предоставить сгенерированный CSS? С этим было бы намного проще работать, чем с источником SASS.
  • 0
    +1 Этот плагин потрясающий - простой и имеет нужные опции, которые мне нужны. Вероятно, лучшее решение для заполнителя, с которым я сталкиваюсь до сих пор.
Показать ещё 1 комментарий
Теги:
google-chrome
webkit

12 ответов

211
Лучший ответ

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

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

Поделиться
  • 6
    Неправильно. В элементе input на заполнитель не влияет высота строки, но заполнение - не лучшее решение. Лучше всего использовать (и я знаю, что обычно он ничего не делает, но в данном случае это делает) свойство CSS VERTICAL-ALIGN.
  • 1
    Да, удивительно, что DID решил проблему. И напечатанный текст все еще остается вертикально центрированным даже без помощи высоты строки.
Показать ещё 2 комментария
25

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

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

Поделиться
  • 0
    Работает в Safari.
18

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

input{
  text-indent: 10px;
}
Поделиться
  • 5
    Это работает и, кажется, лучший ответ без всякой хитрости.
  • 3
    Лучший ответ, заполнение разрушало мой размер формы !!!
2

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

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

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

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

line-height:normal;
Поделиться
1

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

Поделиться
  • 2
    Можете ли вы объяснить, что это добавляет к принятому ответу четыре года назад?
  • 1
    @NathanTuggy для меня принятый ответ предложил полностью удалить атрибут line-height из элемента. Для меня это ничего не сделало, и что исправило проблему для меня было установить line-height: 0px
Показать ещё 1 комментарий
1

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

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

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

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

Поделиться
  • 0
    пытался найти исправление не заполнителя, хотя, как я уже использовал плагин jquery выше :) спасибо за помощь!
  • 0
    Имейте в виду, что это два разных плагина. Я не уверен, что делает тот, который вы используете (демонстрация не работает ни в одном из моих браузеров), но этот использует атрибут placeholder элемента и динамически создает диапазон, отображаемый над полем ввода, что обеспечивает максимальные возможности для укладки.
0

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

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

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

Поделиться
0

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

Поделиться
0

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

Я нашел еще одно решение.

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

Поделиться
  • 2
    не делает ничего для меня.
0

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

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

Поделиться
  • 0
    ммм так это подтверждается тогда? Есть ли способ "понизить" наш хром, чтобы проверить, действительно ли это хром?
  • 1
    это 2013, и у меня все еще есть эта проблема на последней версии Chrome: Версия 27.0.1453.116 м
0

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

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

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

Поделиться
  • 0
    хм, я проверил ссылку, и она не работает для меня. Как вы думаете, есть плагин / что-то в моем Chrome, что вызывает это? снимок экрана: grab.by/8OFf
  • 0
    проверил это с помощью сафари, и он работает. не должны ли Chrome и Safari отображать одно и то же?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню