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

751 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!