資料結構
網路
關係型資料庫管理系統
作業系統
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+ 瀏覽量
廣告