wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Placeholder select css: html — How do I make a placeholder for a ‘select’ box?

alexxlab
No Comments

Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <option> определяет отдельные пункты списка,
создаваемого с помощью контейнера <select>. Ширина
списка определяется самым широким текстом, указанным в теге <option>,
а также может изменяться с помощью стилей. Если планируется отправлять данные
списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через
скрипты.

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

disabled
Заблокировать для доступа элемент списка.
label
Указание метки пункта списка.
selected
Заранее устанавливает определенный пункт списка выделенным.
value
Значение пункта списка, которое будет отправлено на сервер или прочитано
с помощью скриптов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег OPTION</title>
 </head>
 <body> 

  <form action="option1.php">
   <p><select size="3" name="hero">
    <option disabled>Выберите героя</option>
    <option value="t1" selected>Чебурашка</option>
    <option value="t2">Крокодил Гена</option>
    <option value="t3">Шапокляк</option>
    <option value="t4">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

Как сделать подсказки для полей ввода HTML — атрибут placeholder для input, select, textarea

28.07.18 HTML 1167

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

Как все началось? Часто на практике приходилось для компактности вводить подсказки прямо в полях вводах, а не добавлять лишнюю строку с подсказкой. Но специального атрибута для выполнения этой функции не было – можно было лишь просто добавить текст внутри поля при помощи значения value. Когда пользователь кликнет на поле — при помощи JavaScript происходило удаление текста и если пользователь ничего не оставил в поле, то при удалении фокуса — подсказка возвращалась на свое место опять же при помощи JavaScript. Также необходимо было изменять цвет текста на более светлый при помощи CSS-свойств, чтобы он выглядел как подсказка, а не обычный текст. То есть, данное решение требовало дополнительного написания кода.

Видя такое положение дел, разработчики HTML начали работу над этим – для тега input type=»text» со временем был разработан и добавлен специальный атрибут – placeholder. Он позволяет быстро прописать нужную подсказку для текста, которая будет показана пользователю. Цвет текста в подсказке сразу выделяется серым цветом.

На настоящее время поддержка атрибута placeholder есть во всех современных браузерах. Браузеры, не поддерживающие данный атрибут, просто игнорируют его. Существуют специальные разработки – полифилы, которые при помощи JavaScript реализуют работу атрибута placeholder. Поэтому можно просто писать данный атрибут, а в крайних случаях для остальных браузеров использовать полифилы.

<input type="text" placeholder="Введите текст">

Но как быть с другими типами полей input? Например, type=»checkbox» и type=»radio». Для этих типов полей можно использовать тег label, он задает подсказку для помещаемого в него поля. Например, можно написать так:

<label>
	<span>Отметьте нужное:</span>
	<input type="checkbox">
</label>

Для select нет атрибута placeholder, но можно сделать подсказку внутри поля простым способом – ею будет первый option из этого select. Можно визуально выделить его, например, добавить вначале и в конце дефис.

<select>
	<option value="- Выберите значение -">- Выберите значение -</option>
	<option value="Значение 1"> Значение 1</option>
	<option value=" Значение 2"> Значение 2</option>
	<option value=" Значение 3"> Значение 3</option>
</select>

Остается разобраться с textarea. У тега textarea атрибут placeholder отсутствует, но можно добавить подсказку прямо в поле, просто разместив его между тегами textarea.

<textarea>Введите текст</textarea>

Краткий итог, как сделать подсказки для полей ввода HTML:

  • для input type=»text» следует использовать атрибут placeholder;

  • для остальных типов input можно использовать тег label;

  • для select используется подсказка в виде первого option;

  • для textarea подсказка размещается внутри данного тега.

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

::placeholder | CSS (Примеры)

С помощью псевдоэлемента ::placeholder задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder.

Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.

Псевдо-элементы

Синтаксис

::placeholder {
  color: blue;
  font-size: 1.5em;
}

Спецификация

Примечания

  • Internet Explorer использует псевдокласс :-ms-input-placeholder.
  • Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder.
  • Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент ::-webkit-input-placeholder.
  • Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder.
  • Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder.

Пример 1

Пример 2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>placeholder</title>
    <style>
      body {
        background: #053f38;
      }
      input[type='search'] {
        border: 1px solid #98baba; /* Параметры рамки */
        background: transparent; /* Прозрачный фон */
        padding: 1px 4px; /* Поля вокруг текста */
        color: #fff; /* Цвет текста */
      }
      input[type='search']::-moz-placeholder {
        color: #ffd595; /* Цвет подсказывающего текста */
      }
      input[type='search']::-webkit-input-placeholder {
        color: #ffd595;
      }
      input[type='search']:-ms-input-placeholder {
        color: #ffd595;
      }
      input[type='search']::-ms-input-placeholder {
        color: #ffd595;
      }
      input[type='search']::placeholder {
        color: #ffd595;
      }
    </style>
  </head>
  <body>
    <form action="handler.php">
      <p>
        <input
          type="search"
          placeholder="Поиск по сайту"
          name="q"
        />
        <input type="submit" value="Найти" />
      </p>
    </form>
  </body>
</html>

Результат:

См. также

Ссылки

html — заполнитель для тега выбора

Согласно Mozilla Dev Network, заполнитель не является допустимым атрибутом на входе

В современных браузерах добавление атрибута required к элементу

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

Поскольку светло-серый цвет шрифта достигается путем установки его в элементе select , затем : а не , переопределяя его при установке черного цвета для параметра option , когда выбор сделан, текст также будет отображаться серым.

Если это нежелательно, мы можем изменить цвет в зависимости от того, имеет ли select : focus , показывая серый или черный (в зависимости от вкуса), когда элемент используется или не используется:

  / * с: focus здесь мы будем отображать серый цвет, когда элемент не используется * /
Выбрать {
  черный цвет;
}
/ * здесь с фокусом: мы показываем серый цвет при использовании элемента * /
select: focus {
  цвет: # 9e9e9e;
}
вариант {
  черный цвет;
}
option: first-of-type {
  цвет: # 9e9e9e;
}

Дополнительно к этим возможностям:

Хотя можно использовать методы (включая следующие), чтобы скрыть начальное / значение по умолчанию, отличное от (например, «Выбрать основной вид спорта… «) , когда select открыт, это может быть нежелательно .

ПРИМЕЧАНИЕ: После выбора опции невозможно вернуться к исходному состоянию без значения по умолчанию в случае изменения мнения.

Если, однако, эта проблема удобства использования / доступности не вызывает беспокойства, вот простая модификация со скрытым значением по умолчанию, не являющимся значением, когда открыт выбор`:

  выбрать {
  цвет: # 9e9e9e;
}
option: not (: first-of-type) {
  черный цвет;
}
/ * модификация * /
option: first-of-type {
  дисплей: нет;
}

Как отобразить заполнитель для тега

Стилизация собственных полей HTML-форм — особенно полей выбора — с помощью CSS всегда была немного сложной. Недавно я столкнулся с задачей создания поля выбора со значением заполнителя, чтобы поле выбора хорошо сочеталось с другими полями формы на странице.

Проблема с элементами выбора, оформленными в индивидуальном стиле, является сложной. Определенный стиль для поля формы выбора часто невозможно. По этой причине многие веб-сайты заменяют отдельные элементы индивидуализированными решениями, основанными на HTML, CSS и JavaScript.

В большинстве случаев это плохая идея. Трудно обеспечить доступность при создании элемента нестандартной формы . Многие из этих настраиваемых полей формы выбора вообще не работают с программами чтения с экрана или их очень сложно использовать на мобильных устройствах.

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

Стилизация отключенного элемента Option

В моем случае не было необходимости заменять собственное поле выбора HTML фальшивым полем выбора. Проблема в том, как отобразить заполнитель внутри поля выбора.

Сначала я не осознавал, что элемент выбора HTML не поддерживает атрибут placeholder; Я просто предположил, что это так.Затем я попытался использовать отключенный , но выбранный по умолчанию элемент option и установить цвет шрифта того же серого цвета, что и элемент заполнителя ввода. И это работает в Firefox, но в браузерах на базе WebKit и Blink это тоже не работает.

Чистое решение CSS

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

После того, как я придумал простое решение на базе JavaScript, мое чувство «каким-то образом это должно работать без JavaScript» снова начало покалывать. После некоторых исследований я обнаружил, что могу использовать проверку формы в собственном браузере с атрибутом required и псевдоклассом : invalid для достижения желаемого эффекта.

См. Фальшивый заполнитель выбора пера с чистым CSS от Маркуса Оберленера (@maoberlehner) на CodePen.

Избегайте JavaScript любой ценой

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

Сверху JavaScript

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

См. Фальшивый заполнитель выбора пера с (резервным CSS + JavaScript) Маркусом Оберленером (@maoberlehner) на CodePen.

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

Как создать заполнитель в раскрывающемся списке в HTML

Как создать заполнитель в раскрывающемся списке в HTML

admin

HTML5, без категорий, веб-дизайн

В HTML есть этот изящный атрибут, называемый заполнителем.Если бы вы создали текстовое поле ввода, подобное этому:

Это создало бы текстовое поле с заполнителем в нем, которое вы можете видеть ниже:

Текст «Введите здесь» исчезнет, ​​когда вы начнете вводить что-либо в поле, и он появится снова, когда вы его удалите. Это полезный способ побудить пользователя сделать то, что вы хотите, не теряя при этом места. Но как насчет таких выпадающих меню?

Это HTML-код, используемый для создания этого раскрывающегося меню:

Проблема в том, что нет инструкций, указывающих пользователю, что делать.Все, что у нас есть, — это варианты, и все. Итак, что мы хотим сделать, так это добавить еще один тег option, который будет действовать как наш заполнитель и дать ему несколько атрибутов. Вот как будет выглядеть код:

Теперь, если мы запустим его, опция «Select One» действует как заполнитель и сообщит пользователю, что делать, если он не может быть выбран как один из вариантов раскрывающегося меню.

Давайте очень быстро рассмотрим атрибуты, чтобы увидеть, что они делают:

отключено — делает так, чтобы его нельзя было щелкнуть или выбрать

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

скрыто — как только вы выберете что-то еще, оно исчезнет

Теперь, когда наш код обновлен, вот как выглядит последний выпадающий список:

И как только один из вариантов был выбран, «Select One» исчезает, как и обычный заполнитель:

Надеюсь, этот совет помог.Если вы хотите пройти наши тренинги, обязательно загляните на нашу страницу тренинга по веб-разработке. Хорошего дня!

: элемент HTML Select — HTML: язык разметки гипертекста

Элемент HTML . Ему дается атрибут id , чтобы его можно было связать с для целей доступности, а также атрибут name для представления имени связанной точки данных, отправленной на сервер.Каждая опция меню определяется элементом , вложенным в имеет некоторые уникальные атрибуты, которые вы можете использовать для управления им, например, multiple , чтобы указать, можно ли выбрать несколько параметров, и size , чтобы указать, сколько параметров должно отображаться одновременно. Он также принимает большинство атрибутов ввода общей формы, таких как требуется , отключено , автофокус и т. Д.

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

Дополнительные примеры см. В разделе Виджеты собственных форм: раскрывающееся содержимое.

Этот элемент включает глобальные атрибуты.

автозаполнение
DOMString , предоставляющая подсказку для функции автозаполнения пользовательского агента. См. Атрибут автозаполнения HTML для получения полного списка значений и подробностей о том, как использовать автозаполнение.
автофокус
Этот логический атрибут позволяет указать, что элемент управления формы должен иметь фокус ввода при загрузке страницы.Только один элемент формы в документе может иметь атрибут autofocus .
отключен
Этот логический атрибут указывает, что пользователь не может взаимодействовать с элементом управления. Если этот атрибут не указан, элемент управления наследует свои настройки от содержащего элемента, например

; если нет содержащего элемента с установленным атрибутом disabled , то элемент управления включен.
форма
Элемент

, чтобы связать связан со своим предком

, если есть.)
Этот атрибут позволяет связать элементы с атрибутом multiple :

Пользователи мыши могут удерживать клавиши Ctrl , Command или Shift (в зависимости от того, что имеет смысл для вашей операционной системы), а затем щелкать несколько параметров, чтобы выбрать / отменить их выбор.

Предупреждение : Механизм выбора нескольких несмежных элементов с помощью клавиатуры, описанный ниже, в настоящее время работает только в Firefox.

Также обратите внимание: В macOS ярлыки Ctrl + Вверх и Ctrl + Вниз конфликтуют с ярлыками ОС по умолчанию для Mission Control и Окна приложений , поэтому вам придется повернуть выключите их до того, как он заработает.

Пользователи клавиатуры могут выбрать несколько смежных элементов:

  • Фокус на элементе (например, с помощью вкладки ).
  • Удерживая нажатой клавишу Ctrl , затем используйте клавиши курсора Вверх, и Вниз , чтобы изменить параметр «сфокусированного» выбора, т.е.е. тот, который будет выбран, если вы решите это сделать. Вариант выбора «с фокусом» выделяется пунктирным контуром так же, как и ссылка с фокусом на клавиатуре.
  • Нажатие Пробел для выбора / отмены выбора «сфокусированных» опций выбора.

Элемент сложна, и ее трудно контролировать. Если вы хотите получить полный контроль, вам следует рассмотреть возможность использования библиотеки с хорошими возможностями для стилизации виджетов форм или попробовать развернуть собственное раскрывающееся меню с использованием несемантических элементов, JavaScript и WAI-ARIA для обеспечения семантики.

Для получения дополнительной информации о стилизации .

Базовый выбор

В следующем примере создается очень простое раскрывающееся меню, второй вариант которого выбран по умолчанию.

Расширенный выбор с несколькими функциями

Следующий пример более сложен и демонстрирует дополнительные функции, которые вы можете использовать в элементе

Вы увидите, что:

  • Можно выбрать несколько опций, потому что мы включили множественный атрибут .
  • Атрибут размера вызывает одновременное отображение только 4 строк; вы можете прокрутить, чтобы просмотреть все варианты.
  • Мы включили элементов , чтобы разделить параметры на разные группы. Это чисто визуальная группировка, ее визуализация обычно состоит из имени группы, выделенного жирным шрифтом, и отступа параметров.
  • Параметр «Хомяк» включает отключенный атрибут и поэтому не может быть выбран вообще.

Настройка стилей выбора

В этом примере показано, как можно использовать некоторые CSS и JavaScript для предоставления расширенных пользовательских стилей для блока ( s) в родительскую оболочку и повторно реализует стандартное ожидаемое поведение с использованием дополнительных элементов HTML и JavaScript. Это включает в себя базовое поведение вкладок для обеспечения доступности клавиатуры.

  • Сопоставляет некоторые стандартные атрибуты с атрибутами данных новых элементов для управления состоянием и CSS.

    • Поддерживаются не все встроенные функции, это подтверждение концепции. ИТ начинается со стандартного HTML, но те же результаты могут быть достигнуты, начиная с данных JSON, пользовательского HTML или других решений.

    HTML 
      <форма>
 
    
     Стандартные элементы управления 
    <выберите
       name = 1A
       id = выберите
       autocomplete = off
       требуется
       >
       
       
       
       
    
 
    
 
    
     Пользовательские элементы управления 
    <выберите
       name = "2A"
      
       autocomplete = "выкл"
       требуется
       >
    CSS 
      кузов {
  семейство шрифтов: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}

.select: focus {
  цвет границы: синий;
}

html body form fieldset # custom div.select [data-multiple] div.header {
  дисплей: нет;
}

html body form fieldset # custom div.select div.header {
  содержание: '↓';
  отображение: -webkit-inline-box;
  дисплей: -ms-inline-flexbox;
  дисплей: встроенный гибкий;
  -webkit-box-align: по центру;
  -ms-flex-align: center;
  align-items: center;
  отступ: 0;
  положение: относительное;
}

html body form fieldset # custom div.select div.header :: after {
  содержание: '↓';
  выровнять себя: растянуть;
  дисплей: гибкий;
  выровнять контент: центр;
  justify-content: center;
  justify-items: center;
  align-items: center;
  обивка:.5em;
}

html body form fieldset # custom div.select div.header: hover: after {
  цвет фона: синий;
}

.select .header select {
  -webkit-appearance: нет;
  -моз-внешний вид: нет;
  внешний вид: нет;
  семейство шрифтов: наследовать;
  размер шрифта: наследовать;
  отступ: 0;
  ширина границы: 0;
  ширина: 100%;
  гибкость: 1;
  дисплей: нет;
}

.select .header select optgroup {
  дисплей: нет;
}

.select select div.option {
  дисплей: нет;
}

html body form fieldset # custom div.select {
  выбор пользователя: нет;
  размер коробки: рамка-рамка;
  положение: относительное;
  радиус границы: 4 пикселя;
  стиль границы: сплошной;
  ширина границы: 0;
  цвет границы: серый;
  ширина: авто;
  дисплей: встроенный блок;
}

html body form fieldset # custom div.select: focus {
  цвет границы: синий;
}

html body form fieldset # custom div.select:hover {
  цвет границы: синий;
}

html body form fieldset # custom div.select [data-open] {
  граница-нижний-левый-радиус: 0;
  граница-нижний-правый-радиус: 0;
}

html body form fieldset # custom div.select [открытие данных] datalist {
  дисплей: начальный;
}

html body form fieldset # custom div.select datalist {
  -webkit-appearance: нет;
  -моз-внешний вид: нет;
  внешний вид: нет;
  позиция: абсолютная;
  стиль границы: сплошной;
  ширина границы: 1px;
  цвет границы: серый;
  слева: 0;
  дисплей: нет;
  ширина: 100%;
  размер коробки: рамка-рамка;
  z-индекс: 2;
  граница-нижний-левый-радиус: 4px;
  граница-нижний-правый-радиус: 4px;
}

html body form fieldset # custom div.выберите datalist div.option {
  цвет фона: белый;
  нижнее поле: 1px;
  курсор: указатель;
  заполнение: 0.5em;
  ширина границы: 0;
}

html body form fieldset # custom div.select datalist div.option: hover {
  цвет фона: синий;
  цвет белый;
}

html body form fieldset # custom div.select datalist div.option: focus {
  цвет фона: синий;
  цвет белый;
}

html body form fieldset # custom div.select datalist div.option: checked {
  цвет фона: синий;
  цвет белый;
}

html body form fieldset # custom div.выберите div.optgroup div.option [данные отключены] {
  цвет: серый;
}

html body form fieldset # custom div.select div.optgroup div.option [данные проверены] {
  цвет фона: синий;
  цвет белый;
}

html body form fieldset # custom div.select div.optgroup div.label {
  font-weight: жирный;
}

html body form fieldset # custom div.select div.optgroup div.option div.label {
  шрифт: нормальный;
  набивка: .25em;
}

html body form fieldset # custom div.select div.header {
  гибкость: 1;
  дисплей: гибкий;
  ширина: авто;
  размер коробки: рамка-рамка;
  ширина границы: 1px;
  стиль границы: наследование;
  цвет границы: наследовать;
  граница-радиус: наследовать;
}

html body form fieldset # custom div.выберите div.header span {
  гибкость: 1;
  заполнение: .5em;
}
    JavaScript 
      const selects = custom.querySelectorAll ('выбрать');
for (const select of selects) {
    const div = document.createElement ('div');
    const header = document.createElement ('div');
    const datalist = document.createElement ('datalist');
    const optgroups = select.querySelectorAll ('optgroup');
    const span = document.createElement ('диапазон');
    const options = select.options;
    const parent = выберите.parentElement;
    const multiple = select.hasAttribute ('несколько');
    const onclick = function (e) {
        const disabled = this.hasAttribute ('данные отключены');
        select.value = this.dataset.value;
        span.innerText = this.dataset.label;
        если (отключено) возврат;
        if (multiple) {
            if (e.shiftKey) {
                const checked = this.hasAttribute ("данные проверены");
                if (checked) {
                    this.removeAttribute ("данные проверены");
                } еще {
                    это.setAttribute ("данные проверены", "");
                };
            } еще {
                const options = div.querySelectorAll ('. option');
                for (i = 0; i
    Результат

    Таблицы BCD загружаются только в браузере

    :: placeholder | CSS-уловки

    Псевдоэлемент :: placeholder (или псевдокласс, в некоторых случаях, в зависимости от реализации браузера) позволяет стилизовать текст заполнителя элемента формы.Как и в случае, текст установлен с атрибутом заполнителя :

    Вы можете стилизовать этот текст в большинстве браузеров с помощью этого небольшого количества селекторов с префиксом поставщика:

      :: - webkit-input-placeholder {/ * Chrome / Opera / Safari * /
  цвет: розовый;
}
:: - moz-placeholder {/ * Firefox 19+ * /
  цвет: розовый;
}
: -ms-input-placeholder {/ * IE 10+ * /
  цвет: розовый;
}
: -moz-placeholder {/ * Firefox 18- * /
  цвет: розовый;
}

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

    Как и любой псевдо-псевдоним, вы можете ограничить его определенными элементами по мере необходимости, например:

      input [type = "email"]. Big-dog :: - webkit-input-placeholder {
  оранжевый цвет;
}

    Демо

    Разница между

    : заполнитель и :: заполнитель

    : отображается заполнитель предназначен для выбора самого ввода, когда отображается текст заполнителя.В отличие от :: placeholder , который стилизует текст заполнителя.

    Вот диаграмма:

    Я нашел это очень запутанным:

    1. в спецификациях есть только : заполнитель , а не :: заполнитель
    2. : заполнитель все еще может влиять на стиль текста заполнителя, поскольку это родительский элемент (например, размер шрифта).

    Обратите внимание, что : placeholder-shown - это псевдо класс (это элемент в определенном состоянии), а :: placeholder - это псевдо элемент (видимая вещь, которой на самом деле нет в DOM. ).Отличается одинарным или двойным двоеточием.

    Таб Аткинс объяснил мне это по электронной почте:

    : placeholder-shown, являясь псевдоклассом, должен выбрать существующий элемент - он выбирает ввод всякий раз, когда вы находитесь в состоянии отображения заполнителя. Псевдоэлемент :: placeholder оборачивает фактический текст заполнителя.

    Элемент или класс?

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

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

    Например, если вы хотите изменить цвет текста, когда ввод находится в фокусе. Вы могли бы использовать селектор вроде input: focus :: placeholder , чего нельзя было бы сделать с псевдоклассом (они не складываются одинаково).

    IE10 поддерживает это как псевдокласс, а не как элемент.Все остальные реализовали псевдоэлемент.

    Цвет заполнителя Firefox

    Вы могли заметить, как в Firefox цвет заполнителя выглядит блеклым по сравнению с другими браузерами. На изображении ниже Firefox 43 показан слева, а Chrome 47 - справа:

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

    Это связано с тем, что по умолчанию ко всем заполнителям в Firefox применено значение непрозрачности, поэтому, чтобы исправить это, нам нужно сбросить это значение:

      :: - moz-placeholder {
  непрозрачность: 1;
}

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

    Поддерживаемые стили

    Псевдоэлемент поддерживает стили для следующих свойств:

    • шрифт свойства
    • цвет
    • фон свойства
    • межсловный интервал
    • межбуквенный интервал
    • текстовое оформление

      • 90 -507

      по вертикали текст 90 -507 transform

    • line-height
    • text-indent
    • opacity

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

    Поддержка браузера

    Desktop

    8328

    8 908

    Chrome Firefox IE Edge Safari
    57 19 * Нет 79 79
    Android Chrome Android Firefox Android iOS Safari
    89 86 89 10.3

    Другие ресурсы

    Похожие объекты

    примеров | bootstrap-select · Разработчик SnapAppointments

    Стандартные поля выбора

    Сделайте это:

    ГорчичныйКетчупРелиш

    Стань этим:

    ГорчицаКетчупРелиш

      <выбрать>

    Выберите боксы с оптгруппами

    ГорчичныйКетчупРелишПалаткаФонарикТуалетная бумага

      <выбрать>

    Множественные поля выбора

    ГорчичныйКетчупРелиш

      <выбрать несколько>

    Живой поиск

    Вы можете добавить поисковый запрос, передав data-live-search = "true" attribute:

    Хот-дог, картофель фри и содовый бургер, коктейль и улыбка Сахар, специи и все остальное приятно

    Ключевые слова

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

    Хот-дог, картофель фри и содовый бургер, коктейль и улыбка Сахар, специи и все остальное приятно

    Ограничьте количество опций, которые можно выбрать с помощью атрибута data-max-options .Это также работает для групп опций. Настройте сообщение, отображаемое при достижении лимита, с помощью maxOptionsText .

    ГорчицаКетчупРелишГорчицаКетчупРелишРавнинаТушеный

      

<выбрать несколько>

    Заполнитель

    Использование атрибута title установит текст заполнителя по умолчанию, если ничего не выбрано.Это работает как для множественных, так и для стандартных полей выбора:

    Несколько
    ГорчичныйКетчупРелиш

    Стандарт
    ГорчичныйКетчупРелиш

    Выделенный текст

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

    Хот-дог, картофель фри и содовый бургер, коктейль и улыбка Сахар, специи и все остальное приятно

      <выбрать>

    Формат выбранного текста

    Укажите способ отображения выбора с помощью атрибута data-selected-text-format при множественном выборе.

    Поддерживаемые значения:

    • значений : разделенный запятыми список выбранных значений (по умолчанию)
    • счетчик : Если выбран один элемент, отображается значение параметра. Если выбрано более одного, отображается количество выбранных элементов, например Выбрано 2 из 6
    • count> x : где x - количество элементов, выбранных при изменении формата отображения с значений на count
    • статический : всегда показывать выбранный заголовок (заполнитель), независимо от выбора

    ГорчичныйКетчупРелиш

    ГорчицаКетчупРелишЛук

    Классы кнопок

    Вы можете установить классы кнопок с помощью атрибута стиля данных :

    ГорчичныйКетчупРелиш

    ГорчичныйКетчупРелиш

    ГорчичныйКетчупРелиш

    ГорчичныйКетчупРелиш

    ГорчичныйКетчупРелиш

    Отметить выбранную опцию

    Вы также можете показать значок галочки в стандартных полях выбора с show-tick class:

    ГорчичныйКетчупРелиш

      <выбрать>

    Стрелку меню Bootstrap можно добавить с помощью show-menu-arrow class:

    Примечание. Эта функция устарела и будет удалена в v2.0,0.

      <выбрать>

    Индивидуальные варианты стиля

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

    ГорчичныйКетчупРелиш

      <выбрать>
  
  
  

  
     .особый {
  шрифт: жирный! важно;
  цвет: #fff! important;
  фон: # bc0000! important;
  преобразование текста: прописные буквы;
}

    Ширина

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

      
    
  
    
    
    
      <выбор>

    В качестве альтернативы используйте атрибут data-width , чтобы установить ширину выбора.Установите data-width на 'auto' , чтобы автоматически настроить ширину выбора до самого широкого варианта. 'fit' автоматически регулирует ширину выделенной области до ширины текущей выбранной опции. Также можно указать точное значение, например, 300px или 50% .

    ширина: 'авто'
    ГорчицаКетчупРелишВсе вышеперечисленное (и многое, многое другое!)

    ширина: «подходит»
    ГорчицаКетчупРелишВсе вышеперечисленное (и многое, многое другое!)

    ширина: '150px'
    ГорчицаКетчупРелишВсе вышеперечисленное (и многое, многое другое!)

    ширина: '75% '
    ГорчицаКетчупРелишВсе вышеперечисленное (и многое, многое другое!)

    Иконки

    Добавьте значок к опции или optgroup с атрибутом data-icon :

    Примечание: Глификоны не включены в Bootstrap 4. Чтобы использовать FontAwesome или другую библиотеку значков, вам необходимо установить iconBase на что-то другое, кроме 'glyphicon' .

    ГорчицаКетчупРелишМайонезСоус для барбекю

      <выбрать>

    Пользовательское содержимое

    Вставить пользовательский HTML в параметр с data-content attribute:

    Примечание: Эта функция вставляет HTML в DOM. По умолчанию он дезинфицируется с помощью нашего встроенного дезинфицирующего средства.

    ГорчичныйКетчупРелишМайонез

      <выбрать>

    Подтекст

    Добавить подтекст к опции или optgroup с атрибутом data-subtext :

    ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

    ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса С показом для подтекста установлено значение true.

    Размер по умолчанию установлен на «авто» . Если для размера установлено значение «авто» , меню всегда открывается, чтобы показать столько элементов, сколько позволяет окно, без обрезания. Установите size на false , чтобы всегда показывать все элементы. Размер меню также можно указать с помощью атрибута data-size .

    ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальсаГорчинаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальсаГорчинаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

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

    ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

    Выбрать / отменить выбор всех параметров

    Добавляет две кнопки в верхнюю часть меню - Выбрать все и Отменить выбор с data-actions-box = "true" .

    ГорчичныйКетчупРелиш

    Разделитель

    Добавьте data-divider = "true" к опции, чтобы превратить ее в разделитель.

    ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

    Добавьте заголовок в раскрывающееся меню, например.грамм. Заголовок : «Выберите приправу» или data-header = «Выберите приправу»

    ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

    Контейнер

    Добавить меню выбора к определенному элементу, например контейнер: 'body' или data-container = ". Main-content" . Это полезно, если элемент select находится внутри элемента с overflow: hidden .

    контейнер: ложный
    ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

    контейнер: 'body'
    ГорчицаКетчупРелишМайонезСоус для барбекюСалатная заправкаТабаскоСальса

      
    
  <выбор>
    ...

    dropupAuto имеет значение true по умолчанию, что автоматически определяет, должно ли меню отображаться над или под полем выбора.

    No related posts.

    Share :

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *