Value bubbles for range inputs

Стиль выделения текста

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


input::-moz-selection {
  color: gold;
  background: red;
}

input::selection {
  color: gold;
  background: red;
}

Для есть пара нюансов, относящихся не только к :

  • Браузеры на движке Webkit добавляют прозрачность к цвету, указанному в свойствах color и background-color, в результате чего фактический цвет выделения не соответствует заданному в CSS, поэтому их значение следует преобразовывать в формат rgba() с альфа-каналом 0.996 (255/256). При этом манипуляции со свойством opacity не приносят никакого эффекта;
  • Firefox не применяет стиль для картинок, поэтому они всегда выделяются стандартной синей заливкой.

С учетом особенностей Webkit цвета при выделении рекомендуется задавать следующим образом:

input::-moz-selection {
  background-color: red; /* для Firefox допускается прямое указание цвета */
  color: white;
}

input::selection {
  background-color: rgba(255,0,0,.996); /* для Webkit цвета следует преобразовать в rgb(a) */
  color: rgba(255,255,255,.996);
}

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

Browser compatibility

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém.

  • Desktop
  • Dispositivo móvel
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0 12 (23) 10 10.1 3.1
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 57 (Yes) 52.0 (52) 10 (Yes) 5.1

While the specification says that the range input should be drawn vertically if the height is greater than the width, this behavior is not currently implemented. See these Firefox bugs for more information: bug 840820 and bug 981916.

The Android browser recognizes the type starting with version 2.1, but doesn’t fully implement it until version 4.3.

Drawing of hash/tick marks is not yet implemented. See bug 841942 for more information.

追加の属性

すべての 型で共通する属性に加え、 型の入力欄は次の属性にも対応しています。

属性 説明
事前定義されたオプションを持つ <datalist> 要素の ID
許可されている最大値
許可されている最小値
ユーザーインターフェイスと検証の両方で使用される刻み値

オプションの表示がサポートされたブラウザーでどのように行われるかは、下の  を参照してください。


許可されている値の範囲の最大値です。要素に入力された がこれを超えた場合、要素は制約の検証に失敗します。 属性の値が数値でない場合、要素は最大値を持ちません。

この値は 属性の値より大きいか、等しくしなければなりません。

許可されている値の範囲の最小値です。要素の がこれより小さい場合、要素は制約の検証に失敗します。 属性の値が数値でない場合、要素は最小値を持ちません。

この値は 属性の値より小さいか、等しくしなければなりません。

属性は値が吸着する粒度を指定する数値、または後述する特殊な値 です。刻みの基準値に等しい値 (指定されていれば 、そうでなければ 、どちらも設定されていなければ適切な既定値) のみが妥当となります。

文字列値の は刻みがなく、どの値でも許可されることを意味します ( や など、他の制約に制限されます)。

メモ: ユーザーがデータを入力したときには刻みの設定には吸着せず、ユーザーエージェントは直近の妥当な値、同じ距離の値の選択肢が二つあった場合は、正の方向の推奨値に丸められます。

入力欄の既定の刻み値は1であり、刻みの基準値が整数ではない場合を除いて、整数の入力のみを許可します。例えば、 に -10 を、 に 1.5 を設定した場合、 が 1 の場合は正の方向に 1.5, 2.5, 3.5,… など、負の方向に -0.5, -1.5, -2.5,… などのみが許可されます。

非標準の属性

属性 説明
範囲スライダーの方向を設定する。Firefox のみ。
や に影響する -moz-orient 非標準 CSS プロパティと同じように、 属性は範囲スライダーの方向を定義します。設定可能な値には、水平方向に描画されることを意味する  と、垂直方向に描画されることを意味する  があります。

注意: 次の input 要素の属性は range 型には適用されません: , , , , , , , , , height, , , , , , , , , , および 。これらの属性は、例え設定されていたとしても、無視されます。

Les différents types de champs

La façon dont un élément fonctionne dépend grandement de la valeur de son attribut . Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l’attribut n’est pas présent, il aura la valeur implicite .


Les types de champs disponibles sont :

  • : un bouton sans comportement défini.
  • : une case à cocher qui permet de sélectionner/déselectionner une valeur
  • : HTML5 un contrôle qui permet de définir une couleur.
  • : HTML5 un contrôle qui permet de saisir une date (composé d’un jour,  d’un mois et d’une année).
  • : HTML5 un contrôle qui permet de saisir une date et une heure (sans fuseau horaire).
  • : HTML5 un champ qui permet de saisir une adresse éléctronique.
  • : un contrôle qui permet de sélectionner un fichier. L’attribut définit les types de fichiers qui peuvent être sélectionnés.
  • : un contrôle qui n’est pas affiché mais dont la valeur est envoyée au serveur.
  • : un bouton graphique d’envoi du formulaire. L’attribut doit être défini avec la source de l’image et l’attribut doit être défini avec le texte alternatif. Les attributs et permettent de définir la taille de l’image en pixels.
  • : HTML5 un contrôle qui permet de saisir un mois et une année (sans fuseau horaire).
  • : HTML5 un contrôle qui permet de saisir un nombre.
  • : un champ texte sur une seule ligne dont la valeur est masquée. Les attributs et définissent la taille maximale et minimale de la valeur à saisir dans le champ. Note : Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.
  • : un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs.
  • : HTML5 un contrôle qui permet de saisir un nombre dont la valeur exacte n’est pas importante.
  • : un bouton qui réinitialise le contenu du formulaire avec les valeurs par défaut.
  • : HTML5 un champ texte sur une ligne pour des termes de recherche. Les sauts de ligne sont automatiquement retirés.
  • : un bouton qui envoie le formulaire.
  • : HTML5 un contrôle pour saisir un numéro de téléphone.
  • : un champ texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés.
  • : HTML5 A control for entering a time value with no time zone.
  • : HTML5 un champ permettant de saisir une URL.
  • : HTML5 un contrôle permettant de saisir une date représentée par un numéro de semaine et une année (sans indication de fuseau horaire).

Certains types sont désormais obsolètes :

datetime : HTML5 un contrôle pour saisir une date et une heure selon un fuseau horaire UTC. Cette fonctionnalité a été retirée du standard WHATWG HTML.

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Value

O atributo contém uma   que conte uma representação dos números selecionados em string. O valor nunca é uma string vazia (). O valor padrão está entre o mínimo e o máximo especificados, a menos que o valor máximo seja menor que o mínimo, caso em que o padrão é definido como o atributo de valor mínimo. O algoritmo que determina o valor padrão é:

defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min
               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;

Se for feito uma tentativa para definir como máximo um valor inferior ao mínimo, então este é definido como mínimo. Da mesma forma, uma tentativa de definir um valor maior do que o máximo sendo configurado então para o máximo.

Accessibility concerns

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

Кроме того, рассмотрите возможность использования @media-опции — используйте ее для написания , который отключит анимацию, если пользователь уменьшил анимацию в системных настройках.

Узнать больше:

  • Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Синтаксис

/* Значения ключевым словом*/
transform: none;

/* Значения функций */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Мультифункциональные значения */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Глобальные значения */
transform: inherit;
transform: initial;
transform: unset;

Свойство может быть указано как значение ключевого слова или как одно или более значений .

Значения

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

Attributs supplémentaires

En complément des attributs communs à l’ensemble des éléments , les champs pour les intervalles peuvent utiliser les attributs suivants :

Attribut Description
La valeur maximale autorisée.
La valeur minimale autorisée.
Le pas utilisé pour incrémenter la valeur du champ. Cette valeur est utilisée pour l’interface utilisateur du contrôle et pour la validation de la valeur.

Cette valeur doit être supérieure ou égale à celle indiquée par l’attribut .


Cette valeur doit être inférieure ou égale à celle indiquée par l’attribut .

L’attribut est un nombre qui définit la granularité de la valeur ou le mot-clé . Seule les valeurs qui sont des multiples de cet attribut depuis le seuil sont valides.

Lorsque la chaîne de caractères est utilisée, cela indique qu’aucun incrément spécifique n’est défini et que toute valeur (comprise entre et ) est valide.

Note : Lorsque les données saisies par l’utilisateur ne correspondent pas à l’incrément indiqué, l’agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants.

Par défaut, l’incrément utilisé pour les champs de type vaut 1 et on ne peut alors saisir que des entiers à momins que la valeur de base ne soit pas entière. Ainsi, si on définit avec -10 et avec 1.5, un attribut qui vaut 1 permettra de saisir les valeurs positives 1.5, 2.5, 3.5, etc. et les valeurs négatives -0.5, -1.5, -2.5, etc.

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Compatibilité des navigateurs

Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n’hésitez pas à consulter https://github.com/mdn/browser-compat-data et à nous envoyer une pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Webview Android Chrome pour Android Firefox pour Android Opera pour Android Safari sur iOS Samsung Internet
Chrome Support complet 4 Edge Support complet 12 Firefox Support complet 23 IE Support complet 10 Opera Support complet 11 Safari Support complet 3.1 WebView Android Support complet 4.4 Chrome Android Support complet 57 Firefox Android Support complet 52 Opera Android Support complet Oui Safari iOS Support complet 5.1 Samsung Internet Android Support complet 7.0
Tick mark support Chrome Support complet Oui Edge Support complet ≤79 Firefox Aucun support Non Notes IE ? Opera Support complet Oui Safari Aucun support Non WebView Android Support complet Oui Chrome Android Support complet Oui Firefox Android Aucun support Non Notes Opera Android Support complet Oui Safari iOS Aucun support Non Samsung Internet Android Support complet Oui
Vertically-oriented slider support Chrome Support complet Oui Notes Edge Support complet 12 Notes Firefox Aucun support Non Notes IE Support complet 10 Notes Opera Support complet Oui Notes Safari Support complet Oui Notes WebView Android Support complet Oui Notes Chrome Android Support complet Oui Notes Firefox Android Aucun support Non Notes Opera Android Support complet Oui Notes Safari iOS Support complet Oui Notes Samsung Internet Android Support complet Oui Notes

Accessibilité

Utilisation de libellés

Lorsqu’on utilise des champs de formulaire, il est recommandé d’ajouter des libellés pour chacun de ces champs. Ainsi, les personnes qui utilisent des outils d’assistance pourront connaître la signification du champ.

Dans l’exemple suivant, on illustre comment associer un élément avec un élément . Pour ce faire, on ajoutera un identifiant (un attribut ) à l’élément et on référencera cet identifiant via l’attribut de l’élément .

<label for="ptipois">Aimez-vous les petits-pois ?</label>
<input type="checkbox" name="petitspois" id="ptipois">

Dimensionnement — taille

Les éléments interactifs tels que les champs de formulaire doivent fournir une surface suffisamment grande pour qu’il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44×44 .

  • Comprendre le critère d’accessibilité 2.5.5 sur la taille des cibles — Comprendre WCAG 2.1 (en anglais)
  • Taille des cibles et critère 2.5.5, billet en anglais de Adrian Roselli
  • Test rapide : cibles tactiles suffisamment grande — Projet A11Y (billet en anglais)

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()


С этим читают