Bagaimanakah saya boleh membuat paparan peluncur julat HTML5 secara menegak merentas semua penyemak imbas?-tutorial css-php.cn

Bagaimanakah saya boleh membuat paparan peluncur julat HTML5 secara menegak merentas semua penyemak imbas?

Barbara Streisand

Lepaskan： 2024-10-27 09:48:03

asal

750 orang telah melayarinya

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

Orientasi Menegak Peluncur Julat HTML5

Memaparkan peluncur julat secara menegak dalam HTML5 telah terbukti mencabar kerana ketidakkonsistenan merentas penyemak imbas. Untuk mencapai matlamat ini, pelbagai kaedah diperlukan berdasarkan sokongan penyemak imbas.

Pelayar Moden (Chrome dan Firefox >=2024)

Untuk versi kontemporari Chrome dan Firefox , penyelesaian berikut terbukti berkesan:

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

Salin selepas log masuk

Pendekatan ini menjajarkan peluncur secara menegak, dengan arah: rtl memastikan bahawa gelongsor ke atas meningkatkan nilai dan gelongsor ke bawah mengurangkannya.

Chrome warisan (dan penyemak imbas berasaskan Chromium lain)

Untuk versi lama Chrome dan penyemak imbas berasaskan Chromium, perkara berikut berfungsi:

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

Salin selepas log masuk

Penyelesaian ini memaksa penggelongsor menjadi dipaparkan secara menegak, walaupun ia mungkin tidak mewarisi penggayaan yang diingini (cth., penampilan trek dan ibu jari).

Legacy Firefox

Untuk versi Firefox yang lebih lama, atribut orientasi dalam elemen html diperlukan:

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

Salin selepas log masuk

Selain itu, CSS berikut diperlukan:

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

Salin selepas log masuk

Kaedah ini menjajarkan peluncur secara menegak, tetapi ia mungkin mempunyai had dalam gaya pengendalian dan interaksi pengguna .

Contoh Serasi

Coretan kod berikut memberikan contoh yang sepatutnya berfungsi merentas semua penyemak imbas utama (sehingga April 2024):

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

Salin selepas log masuk

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

Salin selepas log masuk

Penyelesaian komprehensif ini memastikan bahawa peluncur julat dipaparkan secara menegak dengan cara yang konsisten merentas versi penyemak imbas yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat paparan peluncur julat HTML5 secara menegak merentas semua penyemak imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!