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:03701semak imbas
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!