資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究Firefox 中是否可以實現 HTML5 input type range 的垂直方向？
在溫度計中，隨著溫度升高，其中的水銀也會上升。降低溫度時則相反。類似地，如果您想在網頁上建立這樣的效果，可以透過 HTML5 中的 range 型別 input 元素來實現。這被稱為 垂直方向的範圍。滑塊輸入最常見的用法是當我們知道上下限時。
例如，如果我們正在開發一個記錄不同地點溫度的網站。您可以將溫度設定為一個滑塊輸入範圍。在 Chrome 和 Safari 等各種網路瀏覽器中都可以做到這一點。最近，Firefox 更新了其系統，使其也能做到這一點。這可以透過使用 HTML5 和 CSS 來實現。
讓我們稍微瞭解一下 Firefox。
Firefox
Mozilla Firefox 或 Firefox 是一款由 Mozilla 基金會開發的開源軟體。它使用 Gecko 引擎渲染網頁。它可在 Windows7、macOS 和 Linux 上使用。它也可用於 Android 和 IOS。
HTML5 input 元素
input 元素允許使用者輸入資訊。它由 <input> 標籤表示。它是一個自閉合元素，即不需要結束標籤。它具有各種輸入型別和屬性。
輸入型別
input 元素的 type 屬性指定使用者提供的輸入型別。type 屬性的值如下所示：
text - 文字形式的輸入。這是預設值。
checkbox - 用於可以選擇多個選項的情況。
radio - 用於只需要選擇一個選項的情況。
color - 指定顏色控制元件。它使使用者能夠在網頁上選擇顏色。
date - 用於以完整日期格式（即 yyyy-mm-dd）選擇日期。
button - 顯示一個按鈕，單擊該按鈕可執行指定的功能。例如：提交
datetime-local - 用於選擇日期和時間，不含時區。
email - 用於輸入電子郵件 ID。
file - 用於使用者選擇檔案。
number - 用於輸入數字
input 元素的其他屬性包括 name、id、required（指定輸入欄位為必填）、min、max、placeholder、size、src（指定影像源）等。
input type range
range 是 <input> 元素的 type 屬性的一個值。它使使用者能夠指定一個數值，該數值不得小於給定值（最小值），也不得大於另一個給定值（最大值）。
精確值不被認為很重要。它通常由滑塊而不是任何文字或數字輸入來表示。預設範圍是 0-100。但是，您可以使用以下屬性指定自己的範圍：
min - 指定最小值
max - 指定最大值
value - 指定預設值
step - 只指定在適當範圍內的值
語法
<input type = “range”>
示例
<html> <style> h2, label { font: sans serif; } Input { margin : 0.5rem; } </style> <body> <h2> Temperature of Cities</h2> <div> <input type = “range” id= “Shimla” name= “Shimla” min = “13” max = ”24” > <label for= “Shimla” > Shimla </label> </div> <div> <input type = “range” id= “Chennai” name= “Chennai” min = “25” max = ”37” > <label for= “Chennai” > Chennai </label> </div> </body> </html>
現在讓我們看看如何建立垂直方向的範圍。
垂直方向的範圍
藉助以下解釋的幾種方法，可以在 Firefox 網路瀏覽器中實現 HTML5 input type range 的垂直方向。
方法 1：使用 transform
以下程式碼用於 HTML5 input range type 的垂直方向：
<html> <style> input[ name = demo ]{ position: relative; top: 200px; left: 50px; height: 15px; width: 187px; border: 0 /* for using in Safari, Chrome and Opera */ -webkit-transform : rotate(270deg); /* for using in Firefox */ -moz-transform: rotate(270deg); /* for using in other browsers */ transform: rotate(270deg); } </style> <body> <input type= “range” name= “demo” min= “0” max= “9” step= “1” value = “2” > </body> </html>
<style> 標籤 - 用於編寫 CSS 程式碼。
Position - 這是元素的一個屬性，指定其在網頁上的位置。此屬性的值為：
Relative - 元素相對於其正常位置定位。
Absolute - 元素相對於最近的已定位祖先元素定位，即顯示絕對值。
Fixed - 即使使用者滾動，此元素也不會從其位置移動。
Top - 此元素的屬性指定元素與網頁頂部邊距之間的距離。
示例
div { Position : relative; Top: 40px; }
Left - 此元素的屬性指定元素與網頁左側邊距之間的距離。
示例
div { Position : absolute; Left : 15px; }
Transform - transform 屬性對元素進行 2D 或 3D 變換。它使使用者能夠旋轉、縮放、移動、傾斜、繼承等。
示例
div{ transform: rotate(45deg); }
# transform: rotate(270 deg) - 用於將水平範圍欄旋轉 270 度，使其垂直。
方法 2：使用 Orient 屬性
Orient 屬性可在 Firefox 中使用。
< input type = “range” min= “0” max=”15” value= “2” orient = “vertical”>
方法 3：使用 Appearance 屬性
appearance 屬性的值為 slider-vertical，它會建立垂直滑塊。
<style> input[ type= “range”] { -webkit-appearance : slider- vertical; } </style> <body> <input type= “range” min=”0” max= “15” value =”2” step= “1” > </body>
結論
早些時候，建立範圍滑塊需要堆疊 JavaScript 程式碼，而且仍然無法正常工作。但現在 HTML5 引入了各種新的屬性和功能，使我們能夠使用 range 型別做一些新的事情。
955 次檢視
