Прошивка CSS-заповнювача HTML5


133

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

У всякому разі, ось код для 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 / OSX, якщо Джон використовує Windows)


2
Чи можете ви надати створений CSS? З цим було б набагато простіше працювати, ніж з джерелом SASS.
RoToRa

+1 Цей плагін є приголомшливим - простий і має правильні варіанти, які мені потрібні. Напевно, найкраще рішення про заповнення заповнення я натрапляю дотепер.
easwee

Якщо у когось є проблеми із встановленням завантажувального інструменту, ці два варіанти допоможуть: розмір шрифту: великий; замість px; і висота лінії: нормальна;
шийка

Відповіді:


229

Я отримав те саме питання.

Я виправив її, видаливши висоту рядка зі свого введення. Перевірте, чи є якась висота лінії, яка спричинює проблему


6
Неправильно. З вхідним елементом на заповнювач не впливає висота лінії, але накладка - не найкраще рішення. Найкраще - використовувати (і я знаю, що це зазвичай ніколи нічого не робить, але в цьому випадку це є) властивістю VERTICAL-ALIGN CSS.
RIK

1
Так, дивно, що DID вирішує проблему. А введений текст все ще залишається вертикально центрованим, навіть без допомоги по висоті рядка.
hndcrftd

59
коли на вході не було висоти рядків, то додавання line-height: normal;зробило для мене трюк
philfreo

У будь-якому випадку вам потрібно додати висоту рядка для веб-переглядачів, але це зробить роботу для сафарі
Калоян Стаматов

95

У мене була аналогічна проблема, моя проблема була з бічною прокладкою, і рішення було з текстовим відступом, я не розумів, що текстовий відступ впливає на позицію сторони-заповнювача.

input{
  text-indent: 10px;
}

28

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


2

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

Я чув про виправлення jQuery для цього, це не підтримка крос-браузерних заповнювачів (jQuery.placeholder), а стилізація заповнювачів, але я її ще не знайшов.

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

Редагувати: Знайдено плагін! jquery.placeholder.min.js надає вам як повну можливість стилізації, так і підтримку крос-браузера в угоду.


намагався знайти виправлення без заповнювача, хоча, як я вже використовував плагін jquery вище :) дякую за допомогу!
роз’їдає

Майте на увазі, що це два різних плагіни. Я не впевнений, що робить те, що ви використовуєте (демонстрація не працює в жодному з моїх браузерів), але цей використовує атрибут заповнення місця та елемента динамічно створює проміжок, відображений над полем введення, який забезпечує максимальні можливості стилізації.
zykadelic

2

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

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

На жаль, в IE початковий заповнювач заповнення виявляється не в правильній позиції. Але коли я натиснув на поле, а потім покинув це поле, заповнювач заповнення з’явився на правильній позиції.

Моїм рішенням було встановити:

line-height:normal;

2

Налаштування line-height: 0px;виправлено для мене в Chrome


2
Чи можете ви пояснити, що це додає до прийнятої відповіді від чотирьох років тому?
Натан Туггі

1
@NathanTuggy мені прийнята відповідь запропонувала line-heightповністю видалити атрибут із елемента. Для мене це не зробило нічого, і те, що line-height: 0px
вирішило

Те саме тут, це те, що насправді вирішило проблему для мене.
аерозон

1

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

http://jsfiddle.net/fLdQG/2/ (потрібен веб-браузер)

Це працює для вас? Якщо ні, чи можете ви оновити загадку за допомогою точної націнки та CSS?


Хм, я перевірив посилання, і воно також не працює для мене. ви думаєте, що в моєму хромі є плагін / щось, що це викликає? скріншот: grab.by/8OFf
роз'їдає

перевірив це за допомогою сафарі, і він працює. чи не повинні хром і сафарі робити те саме?
роз’їдає

Гм, я не знаю плагіну, який би вплинув на ваш макет, як це, але Chrome і Safari як добре працюють для мене (і так, вони повинні робити те саме).
ajcw

1
я, використовуючи 9.0.597.84 (хром) на Mac. яку ви використовуєте?
роз’їдає

Я використовую Chrome 8.0.552.237 у Windows 7.
ajcw

1

Я помітив проблему, коли я оновив Chrome на os x до останнього стабільного випуску (9.0.597.94), тому це помилка в Chrome, і, сподіваємось, буде виправлено.

Я спокушаюся навіть не намагатися обійти це питання і просто чекаю виправлення. Це просто означатиме більше роботи, щоб зняти його.


ммм, так це підтверджено тоді? чи є спосіб "знизити" наш хром, щоб перевірити, чи справді це хром?
роз’їдає

1
це 2013 рік, і я все ще маю цю проблему щодо останньої версії хрому: Версія 27.0.1453.116 м
Postscripter

1

На заповнювач не впливає line-heightі paddingневідповідний веб-переглядачам.

Але я знайшов інше рішення.

VERTICAL-ALIGN. Це, мабуть, єдиний раз, коли це працює, але спробуйте скористатися багатьма рядками коду CSS.


2
нічого не робить для мене.
Postscripter

1

Видаліть висоту лінії або встановіть за допомогою набивання ... це працює у всіх браузерах


1

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

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

Якщо ви використовуєте висоту лінії або обшивку, ви будете розчаровані отриманим заповнювачем. До цього моменту я не знайшов шляху.


1

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

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

1

Я перевірив майже всі методи, наведені тут, на цій сторінці, для свого додатка Angular. Тільки я знайшов рішення через &nbsp;те, що вставляє пробіли, тобто

Кутовий матеріал

<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>

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.