Maison > interface Web > tutoriel CSS > le corps du texte

Comment obtenir des curseurs de plage verticale avec une prise en charge optimale du navigateur ?

Mary-Kate Olsen
Libérer: 2024-11-04 09:16:02
original
921 Les gens l'ont consulté

How to Achieve Vertical Range Sliders with Optimal Browser Support?

Curseurs de plage verticale : un guide pour une prise en charge optimale des navigateurs

Dans le domaine du développement Web, le curseur de plage HTML5 offre un moyen pratique de contrôler les entrées de l’utilisateur dans une plage spécifique. Cependant, l'alignement vertical de ces curseurs peut poser des problèmes sur différents navigateurs.

Ne pouvons-nous pas simplement augmenter la hauteur ?

Au départ, on pensait qu'il suffisait de régler la hauteur du curseur supérieur à sa largeur déclencherait une orientation verticale automatique. Cependant, cette approche présente des limites :

  • Informations obsolètes : Dans la plupart des navigateurs, l'augmentation de la hauteur n'influence plus l'orientation.

La transformation verticale

Pour obtenir un curseur de plage aligné verticalement, envisagez ces solutions spécifiques au navigateur :

  • Navigateurs modernes (Chrome, Firefox) :

    • Appliquez le mode d'écriture : vertical-lr pour établir la direction d'écriture verticale.
    • Utilisez la direction : rtl (de droite à gauche) pour glisser vers le haut pour diminuer la valeur et glisser vers le bas pour augmenter la valeur.
  • Anciens navigateurs Chrome :

    • Utiliser l'apparence : slider-vertical pour forcer une verticale orientation.
    • Définissez une largeur explicite (par exemple, 16 px) pour correspondre à la largeur par défaut des curseurs verticaux dans les navigateurs modernes.
  • Anciens navigateurs Firefox :

    • Ajoutez un attribut orient="vertical" au element.

Exemple de mise en œuvre

Incorporez l'extrait de code suivant pour afficher un curseur de plage aligné verticalement qui prend en charge la plupart des navigateurs :

<code class="css">input[type=range][orient=vertical] {
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    width: 16px;
    vertical-align: bottom;
}</code>
Copier après la connexion
<code class="html"><input type="range" orient="vertical" /></code>
Copier après la connexion

Conclusion

En utilisant ces solutions spécifiques au navigateur, vous pouvez orienter efficacement les curseurs de plage verticalement, garantissant des contrôles de saisie cohérents et conviviaux sur diverses plates-formes. .

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal