如何使用 HTML 和 CSS 建立切換開關？
- WBOY轉載
- 2023-08-25 18:02:091552瀏覽
在HTML 和CSS 中，切換開關是一種圖形使用者介面元素，允許使用者在兩種狀態（通常是「開」和“關”）之間切換。切換開關透過使用類型為「checkbox」的 HTML 輸入元素和具有 CSS 樣式的相應標籤元素來建立。當選取輸入時，標籤元素的樣式設定為顯示「開啟」狀態，未選取輸入時，標籤元素的樣式設定為顯示「關閉」狀態。
如果我們希望為網站添加很酷的互動式功能，切換開關是一個不錯的選擇。在這裡，我們將探討如何使用 HTML 和 CSS 建立切換開關。
建立切換開關的第一步是使用 HTML 建立開關的基本結構。我們可以透過使用 div 元素作為容器，並新增兩個 input 元素來表示開關的開/關狀態來實現這一點。
HTML 程式碼
這是一段 HTML 程式碼。
<html>
<body>
<h3>Toggle Switch Example</h3>
<div class="toggle">
<input type="checkbox" id="toggle-checkbox" class="togglecheckbox">
<label for="toggle-checkbox" class="toggle-label"></label>
</div>
</body>
</html>
現在，我們需要使用 CSS 來設定切換開關的樣式。首先將容器 div 的顯示屬性設為“inline-block”，並將開關的寬度和高度設定為適合您的網站或應用程式的大小。我們也使用 border-radius 屬性為開關建立圓形。
我們將向標籤元素添加一個偽元素並將其內容設為空字串。我們還將給它一個背景顏色並將其絕對定位在容器內。選中該複選框後，我們將偽元素移動到右側以顯示切換開關的開啟狀態。
透過在 CSS 中使用 :checked 選擇器，我們可以在打開開關時更改白色背景顏色的位置，從而創建平滑且具有視覺吸引力的過渡。我們還可以使用其他 CSS 屬性（例如背景顏色、字體大小和文字對齊）來自訂開關的外觀。
CSS 程式碼
這裡是 CSS 程式碼。
<style>
body{
text-align:center;
}
.toggle {
display: inline-block;
width: 80px;
height: 38px;
background-color: #8eeb60;
border-radius: 40px;
position: relative;
overflow: hidden;
}
.toggle input[type="checkbox"] {
display: none;
}
.toggle-label {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 34px;
}
.toggle-label:before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: red;
border-radius: 34px;
position: absolute;
top: 0;
left: 0;
transition: all 0.25s ease-in-out;
}
.toggle-checkbox:checked+.toggle-label:before {
transform: translateX(35px);
}
</style>
範例 1
以下是使用 HTML 和 CSS 建立切換開關的範例。
<html>
<head>
<style>
body{
text-align:center;
}
.toggle {
display: inline-block;
width: 80px;
height: 38px;
background-color: #8eeb60;
border-radius: 40px;
position: relative;
overflow: hidden;
}
.toggle input[type="checkbox"] {
display: none;
}
.toggle-label {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 34px;
}
.toggle-label:before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: red;
border-radius: 34px;
position: absolute;
top: 0;
left: 0;
transition: all 0.25s ease-in-out;
}
.toggle-checkbox:checked+.toggle-label:before {
transform: translateX(35px);
}
</style>
</head>
<body>
<h3>Toggle Switch Example</h3>
<div class="toggle">
<input type="checkbox" id="toggle-checkbox" class="toggle-checkbox">
<label for="toggle-checkbox" class="toggle-label"></label>
</div>
</body>
</html>
範例 2
這是另一個借助 HTML 和 CSS 建立切換開關的範例。
<html>
<head>
<style>
body{
text-align:center;
}
.toggle {
position: relative;
display: block;
width: 100px;
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: 12px;
background: red;
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: 11px;
color: #fff;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.toggle-label:after {
content: attr(data-on);
left: 11px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
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: 64px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition*/
.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 屬性，我們可以創建一個獨特、具有視覺吸引力且易於使用的切換開關。
以上是如何使用 HTML 和 CSS 建立切換開關？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：使用 CSS 向左彈跳動畫效果下一篇：使用 CSS 向左彈跳動畫效果