Comment créer un curseur de plage personnalisé à l'aide de CSS

CSS pur crée des curseurs de plage personnalisés cool: pas de javascript requis, les deux accessibilité

Cet article montrera comment créer des curseurs de portée personnalisés en utilisant uniquement des éléments CSS et HTML <input type="range"> natifs sans compter sur JavaScript tout en garantissant l'accessibilité. Les tutoriels couvrent les moyens de personnaliser les éléments d'entrée, y compris la réinitialisation et la désactivation des styles par défaut du navigateur, la définition des styles de curseurs et la création d'effets de gradient de glissement à l'aide de border-image. De plus, il vous expliquera comment ajouter des animations subtiles pour améliorer l'interaction des utilisateurs, telles que la conversion du curseur d'un cercle de bordure uniquement en cercle complet lorsqu'il a cliqué et assombrissant la couleur lorsqu'il est en plané. Cette technologie conserve les fonctionnalités natives et prend en charge la navigation par clavier, offrant une solution polyvalente et facile à accès pour les curseurs de gamme personnalisés.

Points clés:

• Créez un curseur de portée personnalisé à l'aide de CSS purs et d'éléments HTML <input type="range"> natifs.
Le didacticiel
• contient des étapes pour personnaliser les éléments d'entrée: réinitialiser et désactiver les styles par défaut du navigateur, définir les styles de curseur et créer des effets de gradient de glissement à l'aide de border-image.
• Ajoutez des animations subtiles pour améliorer l'expérience utilisateur, telles que la modification de la forme du curseur lors du clic et la modification de la couleur lorsqu'il est en survol.
• Gardez les fonctionnalités natives et supportez la navigation au clavier pour assurer l'accessibilité.

Le style de curseur de plage par défaut n'est pas beau. La figure suivante montre l'effet d'affichage du curseur de plage par défaut dans les navigateurs Chrome, Firefox et Safari:

Cependant, les éléments <input type="range"> sont difficiles à coiffer. La plupart des solutions en ligne reposent sur JavaScript et le code verbeux. Pire, certaines technologies peuvent également détruire l'accessibilité des éléments. Voyons donc comment mieux utiliser des CS purs pour réaliser sans affecter l'accessibilité. La démonstration de codep suivante montre ce que nous allons construire: lien de codepen

Structure de l'élément d'entrée de plage

Analysons d'abord la structure de l'élément d'entrée de plage. Il s'agit d'un élément natif et chaque navigateur a sa propre implémentation. Il existe deux implémentations principales: une pour les navigateurs WebKit et Blink (tels que Chrome, Edge, Safari et Opera):

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

Un autre pour Firefox:

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

IE a également une troisième implémentation, mais heureusement, ce navigateur a presque disparu maintenant! Cette incohérence entre les navigateurs rend les tâches difficiles car nous devons fournir des styles différents pour chaque implémentation. Je n'entrerai pas dans cela en profondeur car ce post ne sera jamais terminé, mais je recommande fortement de lire ce post par Ana Tudor pour une exploration plus approfondie (les liens de publication doivent être insérés ici). Il vous suffit de vous rappeler que peu importe la mise en œuvre, le "curseur" (pouce) est toujours un composant commun.

Je stylerai seulement cet élément, ce qui rendra mon curseur de portée personnalisé facile à personnaliser. Sautons directement dans le code et voyons ce qui est incroyable.

Élément d'entrée personnalisé

La première étape consiste à utiliser appearance: none et à certaines autres propriétés communes pour réinitialiser et désactiver tous les styles par défaut du navigateur:

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

Dans les cas plus complexes, si d'autres styles par défaut sont appliqués à nos éléments, nous devrons peut-être ajouter plus de code. Assurez-vous simplement que nous avons un élément "nu" sans aucun style visuel. Définissons également certaines variables CSS afin que nous puissions facilement créer différentes variantes pour le curseur de plage:

<code class="language-html"><input type="range" min="0" max="100" step="1" value="20"></code>

Dans cette étape, seul le curseur et son style par défaut sont visibles.

Définissez le style de l'élément de curseur

Style, stylissons l'élément de curseur. Nous commencerons par les paramètres de base:

<code class="language-css">input {
  appearance: none;
  background: none;
  cursor: pointer;
}</code>

Utiliser border-image Ajoutez des effets magiques

Maintenant, nous utiliserons une astuce CSS magique pour compléter notre curseur. Il s'agit de l'utilisation de border-image:

<code class="language-css">input {
  --c: orange; /* 活动颜色 */
  --g: 8px; /* 间隙 */
  --l: 5px; /* 线粗细 */
  --s: 30px; /* 滑块大小 */

  width: 400px; /* 输入宽度 */
  height: var(--s);
  appearance: none;
  background: none;
  cursor: pointer;
}</code>

L'hallucination est parfaite en ajoutant overflow: hidden à l'élément d'entrée et en utilisant des valeurs plus grandes.

Ajoutez des animations

pouvons-nous ajouter des animations subtiles lors de l'interaction avec le curseur? Il ne nécessite pas beaucoup de code et améliorera l'UX du curseur. Tout d'abord, nous convertissons le curseur d'un cercle de bordure uniquement en cercle complet lorsqu'il a cliqué. Pour ce faire, nous ajoutons la valeur box-shadow de spread.

Conclusion

Nous l'avons fait et n'avons pas à faire face à des implémentations liées au navigateur complexes! Nous avons identifié le sélecteur de l'élément de curseur et utilisé certaines astuces CSS pour styliser toute la gamme des curseurs. N'oubliez pas, nous n'utilisons que l'élément <input type="range">, donc nous n'avons pas à nous soucier des problèmes d'accessibilité car nous gardons les fonctionnalités natives. Le curseur prend en charge la navigation au clavier sans aucun problème. Voici plus d'exemples de curseurs créés avec la même technique: lien de codepen

Codepen Link

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!