数据结构
网络
关系型数据库管理系统
操作系统
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 类型垂直方向显示：
<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 属性
可以在 Firefox 中使用 Orient 属性。
< 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 次浏览
