Rumah > Artikel > hujung hadapan web > Bagaimanakah saya boleh membuat paparan peluncur julat HTML5 secara menegak merentas semua penyemak imbas?

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

Barbara Streisandasal: 2024-10-27 09:48:03610semak imbas

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>

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>

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>

Selain itu, CSS berikut diperlukan:

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

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>

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

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!

html5 firefox css chrome html for Attribute this display

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Mencapai Kesan Fade-Out dalam CSS3: Animasi Kerangka Utama lwn. Peralihan?Artikel seterusnya：Bagaimana untuk Mencapai Kesan Fade-Out dalam CSS3: Animasi Kerangka Utama lwn. Peralihan?

Artikel berkaitan

Lihat lagi