From 4a9faa19c8b55e4e5bacf56dd3f7097f4969c14f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sat, 5 Feb 2022 15:49:52 +0100 Subject: update vs en-US (#3609) Co-authored-by: tristantheb --- .../fr/learn/forms/advanced_form_styling/index.md | 707 +++++++++++---------- 1 file changed, 372 insertions(+), 335 deletions(-) (limited to 'files/fr') diff --git a/files/fr/learn/forms/advanced_form_styling/index.md b/files/fr/learn/forms/advanced_form_styling/index.md index fe15e2602f..b82aeaa018 100644 --- a/files/fr/learn/forms/advanced_form_styling/index.md +++ b/files/fr/learn/forms/advanced_form_styling/index.md @@ -1,113 +1,131 @@ --- -title: Composition avancée des formulaires HTML +title: Mise en forme avancée des formulaires HTML slug: Learn/Forms/Advanced_form_styling translation_of: Learn/Forms/Advanced_form_styling original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms --- -{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}} +{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Styling_web_forms", "Learn/Forms/UI_pseudo-classes", "Learn/Forms")}} -Dans cet article, nous verrons comment utiliser les [CSS](/fr/docs/Learn/CSS) avec les formulaires [HTML](/fr/docs/Glossary/HTML) pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'[article précédent](/fr/docs/Learn/Forms/Styling_web_forms), les champs texte et les boutons sont parfaitement compatibles avec les CSS. Maintenant, nous allons approfondir la part sombre de la composition stylistique des formulaires HTML. +Dans cet article, nous verrons comment utiliser CSS pour mettre en forme les contrôles de formulaires qui sont les plus compliqués à mettre en forme. Comme abordé [dans l'article précédent](/fr/docs/Learn/Forms/Styling_web_forms), les champs texte et les boutons sont plutôt simples à mettre en forme. Nous verrons ici le changement de style pour les éléments de formulaire plus problématiques. -Avant d'aller plus loin, faisons un rappel pour deux types de widgets de formulaires : - -- la brute - - : Éléments, dont le style n'est que difficilement modifiable, demandant des astuces complexes, nécessitant parfois de faire appel à une connaissance avancée des CSS3. -- le truand - - : Oubliez l'emploi des CSS pour modifier le style de ces éléments. Au mieux, vous pourrez faire des petites choses, mais elle ne seront pas reproductibles sur d'autres navigateurs ; il ne sera jamais possible de prendre un contrôle total de leur apparence. - -## Possibilités d'expression avec les CSS - -Le problème fondamental avec les widgets de formulaire, autres que champs de texte et boutons, est que dans de nombreux cas, le CSS ne possède pas assez d'expressions pour styliser correctement les widgets complexes. - -L'évolution récente du HTML et des CSS a étendu l'expressivité des CSS : - -- [CSS 2.1](https://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes) était très limité et n'offrait que trois pseudo-classes : + + + + + + + + + + + +
Prérequis : + Compréhension élémentaire de l'informatique et compréhension des bases de HTML et de CSS. +
Objectifs : + Comprendre les composantes de formulaires qui sont difficiles à mettre en forme et pourquoi elles le sont. Apprendre comment personnaliser ces composantes. +
- - {{cssxref(":active")}} - - {{cssxref(":focus")}} - - {{cssxref(":hover")}} +Pour résumer ce que nous avons vu dans l'article précédent, nous avons : -- [CSS Selector Level 3](https://www.w3.org/TR/css3-selectors/) a ajouté quelques nouvelles pseudo-classes relatives aux formulaires HTML : +**La brute** : certains éléments sont plus difficiles à mettre en forme et nécessitent du CSS plus complexe ou quelques astuces : - - {{cssxref(":enabled")}} - - {{cssxref(":disabled")}} - - {{cssxref(":checked")}} - - {{cssxref(":indeterminate")}} +- Les cases à cocher (checkbox) +- Les boutons radio +- [``](/fr/docs/Web/HTML/Element/Input/search) -- [CSS Basic UI Level 3](https://dev.w3.org/csswg/css3-ui/#pseudo-classes) a ajouté quelques autres pseudo-classes pour décrire l'état du widget : +**Le truand** : certains éléments ne peuvent pas être complètement mis en forme à l'aide CSS. Parmi ceux-là, nous avons : - - {{cssxref(":default")}} - - {{cssxref(":valid")}} - - {{cssxref(":invalid")}} - - {{cssxref(":in-range")}} - - {{cssxref(":out-of-range")}} - - {{cssxref(":required")}} - - {{cssxref(":optional")}} - - {{cssxref(":read-only")}} - - {{cssxref(":read-write")}} +- Les éléments qui créent des menus déroulants dont [``](/fr/docs/Web/HTML/Element/Input/color) +- Les contrôles pour les dates comme [``](/fr/docs/Web/HTML/Element/Input/datetime-local) +- [``](/fr/docs/Web/HTML/Element/Input/range) +- [``](/fr/docs/Web/HTML/Element/Input/file) +- [``](/fr/docs/Web/HTML/Element/Progress) et [``](/fr/docs/Web/HTML/Element/Meter) -- [CSS Selector Level 4](https://dev.w3.org/csswg/selectors4/) actuellement en développement actif et objet de grandes discussions ne prévoit pas d'ajouter grand‑chose pour améliorer les formulaires : +Pour commencer, abordons la propriété [`appearance`](/fr/docs/Web/CSS/appearance) qui s'avère plutôt utile pour simplifier la mise en forme de l'ensemble des éléments listés ci-avant. - - {{cssxref(":user-error")}} qui est juste une amélioration de la pseudo‑classe {{cssxref(":invalid")}}. +## `appearance` : contrôler la mise en forme liée au système d'exploitation -Voilà un bon début, mais il y a deux problèmes. Primo, certains navigateurs ne mettent pas en œuvre des fonctionnalités au-delà de CSS 2.1. Secundo, ils ne sont tout simplement pas assez perfectionnés pour styliser des widgets complexes, comme les sélecteurs de date. +Dans l'article précédent, nous avons vu que la mise en forme des contrôles de formulaire provenait historiquement du système d'exploitation sous-jacent, ce qui explique en partie la difficulté à personnaliser l'aspect de ces contrôles. -Il y a quelques expérimentations par les fournisseurs de navigateurs pour étendre l'expressivité des CSS sur les formulaires ; dans certains cas, il est bon de savoir ce qui est disponible.. +La propriété [`appearance`](/fr/docs/Web/CSS/appearance) a été créée comme une méthode pour contrôler les styles provenant du système d'exploitation et qui étaient appliqués aux contrôles de formulaire. Malheureusement, le comportement de cette propriété avec les implémentations initiales variait grandement d'un navigateur à l'autre, elle n'était donc que peu utilisable. Les implémentations plus récentes sont plus cohérentes et les différents navigateurs (que ce soit ceux basés sur Chromium comme Chrome, Opera, et Edge ; Safari ; et Firefox) prennent en charge la version préfixée avec `-webkit-` (`-webkit-appearance`). -> **Attention :** Même si ces expérimentations sont intéressantes, **elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables**. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; [vous faites quelque chose qui peut être mauvais pour le Web](https://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/) en utilisant des propriétés non standard. +Si on consulte la page de référence, on verra que `-webkit-appearance` peut prendre de nombreuses valeurs différentes. Toutefois, la valeur la plus utile et celle que vous utiliserez probablement est `none`. Cela empêche, autant que possible, l'utilisation des styles provenant du système, vous permettant ainsi de construire vos propres styles avec CSS. -- [Extensions des CSS Mozilla](/fr/docs/CSS/CSS_Reference/Mozilla_Extensions "/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions") +Prenons l'exemple suivant avec ces différents contrôles : - - {{cssxref(":placeholder-shown")}} - - {{cssxref(":-moz-submit-invalid")}} - - {{cssxref(":user-invalid")}} - - {{cssxref(":-moz-ui-valid")}} +```html +
+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+

+
+``` -- [Extensions des CSS WebKit](/fr/docs/CSS/CSS_Reference/Webkit_Extensions "/en-US/docs/CSS/CSS_Reference/Webkit_Extensions") +Appliquer la règle CSS suivante permettra de retirer la mise en forme provenant du système. - - {{cssxref("::-webkit-input-placeholder")}} - - [et beaucoup d'autres](http://trac.webkit.org/wiki/Styling%20Form%20Controls) +```css +input { + -webkit-appearance: none; + appearance: none; +} +``` -- [Extensions des CSS Microsoft](http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx) +> **Note :** Mieux vaut utiliser les deux déclarations (celle avec le préfixe et celle sans) lorsqu'on utilise une propriété préfixée. En effet, la version préfixée signifie généralement que du travail de standardisation est en cours et qu'il pourrait y avoir plus tard un consensus pour abandonner la version préfixée. Dans l'exemple qui précède, on se prémunit ainsi contre une telle situation. - - [`:-ms-input-placeholder`](http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx) +L'aperçu qui suit montre : le rendu avec les styles système à gauche et le rendu avec `appearance: none` à droite ([vous pouvez également voir cet exemple sur cette page](https://mdn.github.io/learning-area/html/forms/styling-examples/appearence-tester.html) si vous voulez le tester sur d'autres systèmes). -### Contrôle du style des éléments de formulaire +{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/appearence-tester.html", '100%', 400)}} -Les navigateurs fondés sur WebKit- (Chrome, Safari) et Gecko- (Firefox) offrent les meilleures possibilités de personnalisation des widgets HTML. Ils sont aussi disponibles sur plateforme croisées, et donc ils nécessitent un mécanisme de bascule entre les widgets de « look and feel » natif  et widget stylistiquement composables par l'utilisateur. +Dans la plupart des cas, l'effet correspond au retrait de la mise en forme de la bordure, ce qui rend l'application de CSS plus simple, mais ce n'est pas réellement essentiel. Pour d'autres en revanche, comme les champs de recherche, les boutons radio et les cases à cocher, cela s'avère beaucoup plus utile. Voyons de quoi il en retourne. -À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("appearance")}}. **Ces propriétés ne sont pas normées et ne doivent pas être utilisées**. En fait, elles se comportent même différemment entre WebKit et Gecko. Cependant, il y a une valeur qu'il est bon de connaître : `none`. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés. +### Dompter les champs de recherche -Donc, si vous avez du mal à appliquer un style à un élément, essayez d'utiliser ces propriétés propriétaires. Nous verrons quelques exemples ci-dessous, mais le cas d'utilisation le plus connu de cette propriété est relatif au style des champs de recherche sur les navigateurs WebKit : +[``](/fr/docs/Web/HTML/Element/Input/search) prend généralement la forme d'un champ texte, pourquoi donc `appearance: none;` devient-il utile ici ? En fait, sur macOS, les navigateurs basés sur Chromium ont des restrictions quant aux styles des boîtes de recherche : par exemple, on ne peut pas ajuster librement leur hauteur (`height`) ou la taille de la police (`font-size`). Cela est dû [au fait que les navigateurs basés sur Chromium n'utilisent plus le moteur de rendu WebKit](https://www.wired.com/2013/04/blink/), ce qui a activé l'apparence « Aqua » par défaut pour certains contrôles de formulaires. Avec Aqua activé, certains contrôles de formulaire ne sont plus [redimensionnables](https://webkit.org/blog/28/buttons/). -```html - - -
- -
``` -{{EmbedLiveSample("Contrôle_du_style_des_éléments_de_formulaire", 250, 40)}} +Dans l'exemple qui suit, on peut voir deux champs de recherche identiques. Celui de droite est mis en forme avec `appearance: none;` et celui de gauche n'utilise pas cette propriété. Si vous consultez cet exemple sur Chrome sur macOS, vous verrez que l'exemplaire à gauche n'est pas dimensionné correctement. + +{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/search-appearence.html", '100%', 200)}} -> **Note :** Il est toujours difficile de prédire l'avenir, quand on parle de techniques Web. L'extension des possibilités d'expression des CSS est difficile ; il y a un travail exploratoire avec d'autres spécifications, telles que [Shadow DOM](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html) qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée. +De façon intéressante, définir la boardule ou l'arrière-plan du champ de recherche permet aussi de résoudre ce problème, car cela [désactive](https://webkit.org/blog/28/buttons/) ou « casse » l'apparence Aqua. L'exemple qui suit n'utilise pas du tout `appearance: none;`, mais, sur Chrome pour macOS, on peut voir qu'il ne souffre pas du même problème que l'exemple précédent. -## Exemples +{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/styled-search.html", '100%', 200)}} -### Cases à cocher et boutons radio +> **Note :** Vous pourrez remarquer que, dans le champ de recherche, l'icône de croix pour la suppression disparaît quand le champ perd le focus sur Edge et Chrome mais qu'il reste sur Safari. Pour la retirer en CSS (*y compris lorsqu'il y a le focus*), vous pouvez utiliser `input[type="search"]::-webkit-search-cancel-button { display: none; }`. -Composer le style d'une case à cocher ou d'un bouton radio conduit à un certain désordre en soi. Par exemple, la taille des cases à cocher et des boutons radio n'est pas vraiment destinée à être modifiée et les navigateurs peuvent réagir très différemment, si vous essayez de le faire. +### Mettre en forme les cases à cocher et les boutons radio -#### Une simple case à cocher +La mise en forme d'une case à cocher ou d'un bouton radio s'avère délicate par défaut. Les dimensions des cases ou des boutons ne sont pas prévues pour être changées et les navigateurs réagissent différemment si vous essayez. -Considérons la case à cocher suivante : +Prenons un cas de test simple : ```html @@ -115,370 +133,389 @@ Considérons la case à cocher suivante : ```css span { - display: inline-block; - background: red; + display: inline-block; + background: red; } -input[type=checkbox] { - width : 100px; - height: 100px; +input[type="checkbox"] { + width: 100px; + height: 100px; } ``` -Voici les différentes façons dont divers navigateurs gèrent cela : +Les différents navigateurs gèrent cela différemment, et souvent avec un résultat inadapté : -| Navigateur | Rendu | -| --------------------------------- | --------------------------------- | -| Firefox 57 (Mac OSX) | ![](firefox-mac-checkbox.png) | -| Firefox 57 (Windows 10) | ![](firefox-windows-checkbox.png) | -| Chrome 63 (Mac OSX) | ![](chrome-mac-checkbox.png) | -| Chrome 63 (Windows 10) | ![](chrome-windows-checkbox.png) | -| Opera 49 (Mac OSX) | ![](opera-mac-checkbox.png) | -| Internet Explorer 11 (Windows 10) | ![](ie11-checkbox.png) | -| Edge 16 (Windows 10) | ![](edge-checkbox.png) | +| Navigateur | Rendu | +| ----------------------------------- | --------------------------------- | +| Firefox 71 (macOS) | ![](firefox-mac-checkbox.png) | +| Firefox 57 (Windows 10) | ![](firefox-windows-checkbox.png) | +| Chrome 77 (macOS), Safari 13, Opera | ![](chrome-mac-checkbox.png) | +| Chrome 63 (Windows 10) | ![](chrome-windows-checkbox.png) | +| Internet Explorer 11 (Windows 10) | ![](ie11-checkbox.png) | +| Edge 16 (Windows 10) | ![](edge-checkbox.png) | -#### Un exemple un peu plus compliqué +#### Utiliser `appearance: none` sur les boutons radio et les cases à cocher -Comme Opera et Internet Explorer n'ont pas de fonctionnalités telles que {{cssxref("-webkit-appearance")}} ou {{cssxref("appearance")}}, leur utilisation n'est pas appropriée. Heureusement, nous sommes dans un cas où les CSS disposent d'assez d'expressions pour trouver des solutions. Prenons un exemple courant : +Comme nous l'avons vu, il est possible de retirer l'apparence par défaut d'une case à cocher ou d'un bouton radio avec [`appearance`](/fr/docs/Web/CSS/appearance)`:none;`. Prenons cet exemple en HTML: ```html
+ Fruits préférés +

- - +

- - +

- - +

``` -avec une composition stylistique élémentaire : +Utilisons une mise en forme personnalisée pour les cases à cocher. Commençons par retirer le style du système : ```css -body { - font: 1em sans-serif; +input[type="checkbox"] { + -webkit-appearance: none; + appearance: none; } +``` -form { - display: inline-block; +Nous pouvons ensuite utiliser les pseudo-classes [`:checked`](/fr/docs/Web/CSS/:checked) et [`:disabled`](/fr/docs/Web/CSS/:disabled) pour changer l'apparence de nos cases à cocher lorsque leur état change : - padding: 0; - margin : 0; -} - -fieldset { - border : 1px solid #CCC; - border-radius: 5px; - margin : 0; - padding: 1em; +```css +input[type="checkbox"] { + position: relative; + width: 1em; + height: 1em; + border: 1px solid gray; + /* Ajuste la position de la case à cocher sur la ligne de base du texte */ + vertical-align: -2px; + /* On définit ici afin que le mode de contraste élevé de Windows puisse + surcharger */ + color: green; } -label { - cursor : pointer; +input[type="checkbox"]::before { + content: "✔"; + position: absolute; + font-size: 1.2em; + right: -1px; + top: -0.3em; + visibility: hidden; } -p { - margin : 0; +input[type="checkbox"]:checked::before { + /* On utilise `visibility` plutôt que `display` pour éviter le + recalcul de la disposition */ + visibility: visible; } -p+p { - margin : .5em 0 0; +input[type="checkbox"]:disabled { + border-color: black; + background: #ddd; + color: gray; } ``` -Maintenant composons pour avoir une case à cocher personnalisée. +Nous en verrons plus sur les pseudo-classes [dans le prochain article](/fr/docs/Learn/Forms/UI_pseudo-classes). Voyons celles qui sont utilisées ici : -Le plan consiste à remplacer la case à cocher native par une image de notre choix. Tout d'abord, nous devons préparer une image avec tous les états requis pour une case à cocher. Ces états sont : non coché, coché, non coché désactivé et coché désactivé. Cette image sera utilisée comme fantôme des CSS : +- `:checked` permet d'appliquer une mise en forme lorsque la case à cocher ou le bouton radio est dans un état sélectionné. +- `:disabled` permet d'appliquer une mise en forme lorsque la case à cocher ou le bouton radio est désactivé et qu'on ne peut pas interagir avec. -![Check box CSS Sprite](checkbox-sprite.png) +Voici le résultat de cet exemple : -Commençons par masquer les cases à cocher d'origine. Nous les déplacerons simplement à l'extérieur de la fenêtre de visualisation de la page. Il y a deux choses importantes à considérer ici : +{{EmbedLiveSample("", '100%', 200)}} -- N'utilisez pas `display:none` pour masquer la case à cocher, car comme nous le verrons ci-dessous, nous avons besoin que la case à cocher soit disponible pour l'utilisateur. Avec `display:none`, la case à cocher n'est plus accessible à l'utilisateur, ce qui signifie qu'il est impossible de la cocher ou de la décocher. -- Nous utiliserons quelques sélecteurs CSS3 pour réaliser notre style. Afin de prendre en charge les navigateurs existants, nous pouvons préfixer tous nos sélecteurs avec la pseudo-classe {{cssxref(":root")}}. Dans l'état actuel des implémentations, tous les navigateurs prenant en charge ce dont nous avons besoin prenent en charge également la pseudo-classe {{cssxref(":root")}}, mais d'autres ne le font pas. Ceci est un exemple de moyen pratique pour filtrer l'ancien Internet Explorer. Ces anciens navigateurs verront la case à cocher normale tandis que les navigateurs modernes verront la case à cocher personnalisée. +Voici quelques autres exemples pour vous donner d'autres idées  -```css -:root input[type=checkbox] { - /* les cases à cocher d'origine sont placées en dehors de la vue */ - position: absolute; - left: -1000em; -} -``` +- [Mise en forme de boutons radio](https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html) : avec une mise en forme personnalisée pour des boutons radio +- [Exemple d'interrupteur](https://mdn.github.io/learning-area/html/forms/toggle-switch-example/) : une case à cocher mise en forme afin de ressembler à un interrupteur. + +Si vous consultez ces exemples dans un navigateur qui ne prend pas en charge [`appearance`](/fr/docs/Web/CSS/appearance), votre conception ne sera pas visible, mais les éléments ressembleront à des cases à cocher et seront utilisables. + +> **Note :** Bien qu'Internet Explorer ne prenne pas en charge `appearance`, `input[type=checkbox]::-ms-check` permet de cibler les cases à cocher dans IE. Cette technique fonctionne également pour les boutons radio malgré le nom `-ms-check`. + +## Quid des éléments dans la catégorie des « truands » ? + +Voyons maintenant les contrôles qui tombent dans la catégorie des « truands » et qui sont très difficiles à mettre en forme. Il s'agit des contrôles avec des listes déroulantes ou de contrôles complexes comme [`color`](/fr/docs/Web/HTML/Element/Input/color), [`datetime-local`](/fr/docs/Web/HTML/Element/Input/datetime-local), et des contrôles de feedback comme [``](/fr/docs/Web/HTML/Element/Progress) et [``](/fr/docs/Web/HTML/Element/Meter). + +Le problème est que ces éléments ont des apparences bien différentes entre les navigateurs et bien que certaines parties soient personnalisables, d'autres parties internes sont purement impossibles à mettre en forme. -Maintenant que nous sommes débarrassés des cases à cocher natives, ajoutons la nôtre. Pour cela, nous utiliserons le pseudo élément {{cssxref("::before")}} de l'élément {{HTMLElement("label")}} qui suit la case à cocher originale. Ainsi, dans le sélecteur suivant, nous utilisons le sélecteur d'attributs pour cibler la case à cocher, puis nous utilisons le sélecteur de parents adjacent pour cibler le `label` suivant la case à cocher originale. Enfin, nous accédons au pseudo-élément {{cssxref("::before")}} et le styliser pour qu'il affiche notre case à cocher personnalisée non cochée. +Si quelques différences d'apparence ne vous dérangent pas, vous pourrez vous en sortir avec une mise en forme simple afin d'avoir un dimensionnement et une mise en forme cohérente pour des choses comme les couleurs d'arrière-plan. `appearance` vous permettra d'enlever la mise en forme système. + +Prenons l'exemple suivant, qui illustre certaines fonctionnalités des formulaires parmi les « truands » : + +{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/ugly-controls.html", '100%', 750)}} + +Dans cet exemple, on utilise le CSS suivant : ```css -:root input[type=checkbox] + label:before { - content: ""; - display: inline-block; - width : 16px; - height : 16px; - margin : 0 .5em 0 0; - background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0; +body { + font-family: 'Josefin Sans', sans-serif; + margin: 20px auto; + max-width: 400px; +} + +form > div { + margin-bottom: 20px; +} -/* Ce qui suit est utilisé pour ajuster la position des cases à cocher - sur la ligne de base suivante */ +select { + -webkit-appearance: none; + appearance: none; +} - vertical-align: bottom; +.select-wrapper { position: relative; - bottom: 2px; } -``` -Nous utilisons les pseudo-classes {{cssxref(":checked")}} et {{cssxref(":disabled")}} sur la case à cocher d'origine pour changer l'état de notre case à cocher personnalisée en conséquence. Comme nous utilisons un fantôme des CSS, tout ce que nous avons à faire est de changer la position de l'arrière-plan. +.select-wrapper::after { + content: "▼"; + font-size: 1rem; + top: 6px; + right: 10px; + position: absolute; +} -```css -:root input[type=checkbox]:checked + label:before { - background-position: 0 -16px; +button, label, input, select, progress, meter { + display: block; + font-family: inherit; + font-size: 100%; + margin: 0; + box-sizing: border-box; + width: 100%; + padding: 5px; + height: 30px; +} + +input[type="text"], input[type="datetime-local"], input[type="color"], select { + box-shadow: inset 1px 1px 3px #ccc; + border-radius: 5px; } -:root input[type=checkbox]:disabled + label:before { - background-position: 0 -32px; +label { + margin-bottom: 5px; } -:root input[type=checkbox]:checked:disabled + label:before { - background-position: 0 -48px; +button { + width: 60%; + margin: 0 auto; } ``` -Une dernière chose (mais très importante) : lorsqu'un utilisateur utilise le clavier pour naviguer d'un widget à un autre, chaque widget qui reçoit le focus doit être marqué visuellement. Comme nous cachons les cases à cocher natives, nous devons implémenter cette fonctionnalité nous-mêmes : l'utilisateur doit pouvoir voir où elles se trouvent dans le formulaire. Le CSS suivant met en œuvre le focus sur les cases à cocher personnalisées. +> **Note :** Si vous souhaitez tester ces exemples sur différents navigateurs en même temps, vous pouvez [les retrouver ici](https://mdn.github.io/learning-area/html/forms/styling-examples/ugly-controls.html) (vous pouvez également [voir leur code source](https://github.com/mdn/learning-area/blob/master/html/forms/styling-examples/ugly-controls.html)). +> +> Il faut également garder à l'esprit que nous avons ajouté du JavaScript à la page qui liste les fichiers sélectionnés par le sélecteur de fichier (directement après le contrôle). Il s'agit d'une version simplifiée de l'exemple trouvé sur la page de référence pour [``](/fr/docs/Web/HTML/Element/Input/file#exemples). + +Comme vous pouvez le voir, on arrive à avoir un aspect relativement uniforme pour les différents navigateurs modernes. + +Nous avons appliqué quelques règles CSS pour normaliser les contrôles et les libellés associés afin que leur dimensionnement, le choix de la police, etc. soient cohérents (voir l'article précédent pour plus d'explications) : ```css -:root input[type=checkbox]:focus + label:before { - outline: 1px dotted black; +button, label, input, select, progress, meter { + display: block; + font-family: inherit; + font-size: 100%; + margin: 0; + box-sizing: border-box; + width: 100%; + padding: 5px; + height: 30px; +} +``` + +Nous ajoutons également des ombres et des coins arrondis aux contrôles qui le nécessitent : + +```css +input[type="text"], input[type="datetime-local"], input[type="color"], select { + box-shadow: inset 1px 1px 3px #ccc; + border-radius: 5px; } ``` -Voyez directement ici le résultat : +Cette dernière règle, sur d'autres contrôles comme les intervalles, barres de progression, n'auraient pas sens, car ils ajouteraient une boîte moche autour de la zone du contrôle. -{{EmbedLiveSample("Un_exemple_un_peu_plus_compliqué", 250, 130)}} +Voyons quelques points relatifs à chaque type de contrôle et les difficultés associées. -### Gérer le cauchemar \`, nous savions donc que ce ne serait pas un gros problème. + +Deux choses sont plus difficiles. Pour commencer, l'icône de flèche de sélection pour la liste déroulante qui varie d'un navigateur à l'autre. Elle a également tendance à changer si on augmente la taille de la boîte de sélection. Pour corriger ceci, on utilisera notre vieil ami `appearance: none` afin de supprimer l'icône : + +```css +select { + -webkit-appearance: none; + appearance: none; +} +``` + +Nous allons créer notre propre icone à l'aide de contenu généré. On place un élément contenant le contrôle afin que [`::before`](/fr/docs/Web/CSS/::before)/[`::after`](/fr/docs/Web/CSS/::after) puissent fonctionner (en effet, ils n'ont pas d'effet sur les éléments ` - +
+ + +
``` +On utilise alors du contenu généré afin de créer une flèche qui pointe vers le bas et on la situe à la bonne place avec du positionnement : + ```css -select { - width : 80px; - padding : 10px; +.select-wrapper { + position: relative; } -option { - padding : 5px; - color : red; +.select-wrapper::after { + content: "▼"; + font-size: 1rem; + top: 6px; + right: 10px; + position: absolute; } ``` -Le tableau suivant montre comment divers navigateurs gèrent cela, dans deux cas. Les deux premières colonnes ne sont que l'exemple ci-dessus. Les deux colonnes suivantes utilisent des CSS personnalisés supplémentaires, pour avoir plus de contrôle sur l'apparence du widget : +Le deuxième problème rencontré est l'absence de contrôle sur la boîte de choix qui apparaît lorsqu'on clique sur le sélecteur. Vous pourrez voir que les options de choix n'héritent pas de la police de leur parent. Il est également impossible de définir de façon cohérente l'espacement et les couleurs. Ainsi, Firefox appliquera [`color`](/fr/docs/Web/CSS/color) et [`background-color`](/fr/docs/Web/CSS/background-color) sur [`