如何使用 HTML 和 CSS 建立切換開關？-css教學-PHP中文網

如何使用 HTML 和 CSS 创建切换开关？

在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>

登入後複製