数据结构
网络
关系数据库管理系统
操作系统
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 次查看
