Заполнение css заполнителя HTML5

Question

Заполнение css заполнителя HTML5

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

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

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

placeholder text input

EDIT:

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

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

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

645 12

google-chrome css css3 html5 webkit

12 ответов:

Comments

Ничего не найдено.

Johansrk · Accepted Answer · 2014-04-08 22:20:07

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

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

talsibony · Accepted Answer · 2016-05-17 16:41:56

У меня была аналогичная проблема, моя проблема была с боковым заполнением, и решение было с текстовым отступом, я не понимал, что текстовый отступ влияет на позицию стороны заполнителя.
input{
  text-indent: 10px;
}

floribon · Accepted Answer · 2013-06-05 04:51:41

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

user2264934 · Accepted Answer · 2013-12-04 21:37:44

line-height: normal; 
работал для меня ;)

22

2013-12-04 21:37:44

Babs · Accepted Answer · 2014-02-28 12:30:26

у меня была проблема, которая появляется только в internet explorer. Поле ввода было стилизовано
height:38px;
line-height:38px;
к сожалению, в IE начальный заполнитель появляется не в правильном положении. Но когда я щелкнул в поле, а затем покинул это поле, заполнитель появился в правой позиции.

мое решение было установить:
line-height:normal;

zykadelic · Accepted Answer · 2012-03-19 16:46:39

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

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

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

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

JobJob · Accepted Answer · 2015-04-06 00:05:18

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

ajcw · Accepted Answer · 2011-02-07 14:25:29

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

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

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

will · Accepted Answer · 2011-02-11 13:04:48

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

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

Robin Knight · Accepted Answer · 2011-10-02 16:04:45

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

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

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

Hiren Dihora · Accepted Answer · 2014-09-16 11:37:52

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

rb- · Accepted Answer · 2017-02-04 23:41:55

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

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

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