Comment puis-je afficher verticalement un curseur de plage HTML5 sur tous les navigateurs ?-tutoriel CSS-php.cn

Comment puis-je afficher verticalement un curseur de plage HTML5 sur tous les navigateurs ?

Barbara Streisand

Libérer： 2024-10-27 09:48:03

original

619 Les gens l'ont consulté

How can I make an HTML5 range slider display vertically across all browsers?

Orientation verticale du curseur de plage HTML5

L'affichage vertical d'un curseur de plage en HTML5 s'est avéré difficile en raison d'incohérences entre les navigateurs. Pour y parvenir, diverses méthodes sont nécessaires en fonction de la prise en charge du navigateur.

Navigateurs modernes (Chrome et Firefox >=2024)

Pour les versions contemporaines de Chrome et Firefox , la solution suivante s'avère efficace :

<code class="css">input[type=range] {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 16px;
}</code>

Copier après la connexion

Cette approche aligne le curseur verticalement, avec la direction : rtl garantissant que le glissement vers le haut augmente la valeur, et le glissement vers le bas la diminue.

Chrome hérité (et autres navigateurs basés sur Chromium)

Pour les anciennes versions de Chrome et les navigateurs basés sur Chromium, les opérations suivantes fonctionnent :

<code class="css">input[type=range] {
  appearance: slider-vertical;
  width: 16px; /* Optional, suggested to match newer browsers */
}</code>

Copier après la connexion

Cette solution force le curseur à être affiché verticalement, bien qu'il puisse ne pas hériter du style souhaité (par exemple, apparence de la piste et du pouce).

Ancienne Firefox

Pour les anciennes versions de Firefox, un attribut d'orientation dans l'élément html est requis :

<code class="html"><html orient="vertical">
  <body>
    <input type="range" />
  </body>
</html></code>

Copier après la connexion

De plus, le CSS suivant est nécessaire :

<code class="css">input[type=range] {
  vertical-align: bottom;
}</code>

Copier après la connexion

Cette méthode aligne le curseur verticalement, mais elle peut avoir des limites dans la gestion des styles et l'interaction de l'utilisateur .

Exemple compatible

L'extrait de code suivant fournit un exemple qui devrait fonctionner sur tous les principaux navigateurs (à partir d'avril 2024) :

<code class="html"><input type="range" orient="vertical" /></code>

Copier après la connexion

<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

Cette solution complète garantit que le curseur de plage est affiché verticalement de manière cohérente dans les différentes versions du navigateur.

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment puis-je afficher verticalement un curseur de plage HTML5 sur tous les navigateurs ?