数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 HTML 和 CSS 创建切换开关？
要使用 HTML 和 CSS 创建切换开关，我们将使用简单的 HTML 输入元素和 CSS 来设置切换框的样式，使其具有用户交互性。**切换开关** 是一种图形用户界面元素，允许用户在两种状态（通常是“开”和“关”）之间切换。在本文中，我们将了解如何使用 HTML 和 CSS 创建切换开关。
我们有一个带有 input 标签，其 type 属性值为复选框。我们的任务是设计此复选框并使用 HTML 和 CSS 创建一个切换开关。我们将为此遵循两步过程
步骤 1 - 添加 HTML
我们使用 input 标签添加了一个复选框，其 type 属性值为复选框。我们还在其中添加了两个 span 标签，其中类名为 toggle-label 的 span 标签充当切换开关的背景，显示“开”和“关”标签。另一个类名为 toggle-handle 的 span 标签用于开关的可移动旋钮。
<html>
<head>
<title>
Create toggle switch by using HTML and CSS
</title>
<body>
<h3>
Toggle Switch by using HTML and CSS
</h3>
<p>
</p>
<label class="toggle">
<input class="toggle-input" type="checkbox"/>
<span class="toggle-label" data-off="OFF"
data-on="ON">
</span>
<span class="toggle-handle"></span>
</label>
</body>
</html>
步骤 2 - 添加 CSS
我们使用了以下步骤来设计切换按钮
- 我们使用 toggle 类来设计切换按钮容器，通过使用 height 和 width 设置其尺寸，将 cursor 更改为指针，设置 padding 并使用 display 属性将其显示为块级元素。
- 我们使用 toggle-input 类使用 opacity 属性隐藏复选框，并使用 top、left 和 position 属性设置其位置。
- 我们使用 toggle-label 类来设置标签和开关的 background 样式，通过设置其颜色、size 和 border radius。
- 我们使用了 before 和 after 伪元素 来设置 margin 并使用 data-off 和 data-on 值通过 content 属性和 attr() 函数显示关闭和打开状态。
- 我们使用 toggle-input:checked~.toggle-label 类在切换开关时更改背景颜色，并在其上使用伪元素来设置不透明度，以便在切换时显示“开”和“关”。
- 我们使用 toggle-handle 类来设计开关的圆形手柄，并使用伪元素在切换开关前后设置其样式。
- 我们使用 toggle-label,toggle-handle 类使用 transition 属性在“开”和“关”之间切换时设置过渡效果。
以下是实现上述步骤的 CSS 代码。
body {
text-align: center;
}
.toggle {
position: relative;
display: block;
width: 80px;
height: 40px;
padding: 3px;
margin: auto;
border-radius: 50px;
cursor: pointer;
}
.toggle-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.toggle-label {
position: relative;
display: block;
height: inherit;
font-size: 14px;
background: #3c024a;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12),
inset 0 0 3px rgba(0, 0, 0, 0.15);
}
.toggle-label:before, .toggle-label:after {
position: absolute;
top: 50%;
color: black;
margin-top: -.5em;
line-height: 1;
}
.toggle-label:before {
content: attr(data-off);
right: 10px;
color: #fff;
}
.toggle-label:after {
content: attr(data-on);
left: 12px;
color: #fff;
opacity: 0;
}
.toggle-input:checked~.toggle-label {
background: green;
}
.toggle-input:checked~.toggle-label:before {
opacity: 0;
}
.toggle-input:checked~.toggle-label:after {
opacity: 1;
}
.toggle-handle {
position: absolute;
top: 4px;
left: 4px;
width: 38px;
height: 38px;
background: linear-gradient(to bottom,
#FFFFFF 40%, #f0f0f0);
border-radius: 50%;
}
.toggle-handle:before {
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 16px;
height: 16px;
}
.toggle-input:checked~.toggle-handle {
left: 43.5px;
box-shadow: -1px 1px 5px
rgba(0, 0, 0, 0.2);
}
.toggle-label,
.toggle-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
完整示例代码
以下是使用 HTML 和 CSS 创建切换开关的完整代码。
<html>
<head>
<title>
Create toggle switch by using HTML and CSS
</title>
<style>
body {
text-align: center;
}
.toggle {
position: relative;
display: block;
width: 80px;
height: 40px;
padding: 3px;
margin: auto;
border-radius: 50px;
cursor: pointer;
}
.toggle-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.toggle-label {
position: relative;
display: block;
height: inherit;
font-size: 14px;
background: #3c024a;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12),
inset 0 0 3px rgba(0, 0, 0, 0.15);
}
.toggle-label:before, .toggle-label:after {
position: absolute;
top: 50%;
color: black;
margin-top: -.5em;
line-height: 1;
}
.toggle-label:before {
content: attr(data-off);
right: 10px;
color: #fff;
}
.toggle-label:after {
content: attr(data-on);
left: 12px;
color: #fff;
opacity: 0;
}
.toggle-input:checked~.toggle-label {
background: green;
}
.toggle-input:checked~.toggle-label:before {
opacity: 0;
}
.toggle-input:checked~.toggle-label:after {
opacity: 1;
}
.toggle-handle {
position: absolute;
top: 4px;
left: 4px;
width: 38px;
height: 38px;
background: linear-gradient(to bottom,
#FFFFFF 40%, #f0f0f0);
border-radius: 50%;
}
.toggle-handle:before {
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 16px;
height: 16px;
}
.toggle-input:checked~.toggle-handle {
left: 43.5px;
box-shadow: -1px 1px 5px
rgba(0, 0, 0, 0.2);
}
.toggle-label,
.toggle-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
</style>
</head>
<body>
<h3>
Toggle Switch by using HTML and CSS
</h3>
<label class="toggle">
<input class="toggle-input" type="checkbox" />
<span class="toggle-label" data-off="OFF"
data-on="ON">
</span>
<span class="toggle-handle"></span>
</label>
</body>
</html>
结论
使用 HTML 和 CSS 创建切换开关是一个简单的过程，可以为您的网站或应用程序增加很多价值。通过遵循这些步骤并尝试不同的 CSS 属性，我们可以创建一个独特、视觉吸引力强且易于使用的切换开关。
更新于： 2024年8月5日
17K+ 浏览量
广告