純CSS如何實現(xiàn)iOS風格打開關閉選擇框功能

發(fā)布時間：2021-03-17 13:53:34 來源：億速云閱讀：203 作者：清風欄目：web開發(fā)

本文將為大家詳細介紹“純CSS如何實現(xiàn)iOS風格打開關閉選擇框功能”，內(nèi)容步驟清晰詳細，細節(jié)處理妥當，而小編每天都會更新不同的知識點，希望這篇“純CSS如何實現(xiàn)iOS風格打開關閉選擇框功能”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。

1 效果

2 知識點

2.1 <label>標簽

在html中，<label>標簽通常和<input>標簽一起使用，<label>標簽為input元素定義標注（標記）。label 元素不會向用戶呈現(xiàn)任何特殊效果，<label>標簽的作用是為鼠標用戶改進了可用性，當用戶點擊<label>標簽中的內(nèi)容時，瀏覽器就會自動將焦點轉到和該標簽相關聯(lián)的控件上；<label>標簽在單選按鈕和復選按鈕上經(jīng)常被使用，使用該標簽后，你點擊label標簽內(nèi)的內(nèi)容，也可以選中對應的單選按鈕或復選按鈕。

<label>標簽語法格式：

<label for="關聯(lián)控件的id" form="所屬表單id列表">文本內(nèi)容</label>

關聯(lián)控件的id一般指的是input元素的id；在html5中還新增了一個屬性form，form屬性是用來規(guī)定所屬的一個或多個表單的 id 列表，以空格隔開；當<label>標簽不在表單標簽<form>中時，就需要使用form屬性來指定所屬表單；

<label> 元素沒有特別的樣式考慮——結構上，<label> 是簡單的行內(nèi)元素，所以可使用和 <span> 或 <a>元素大致相同的方式來應用樣式。

2.2 CSS float 屬性

float屬性指定一個盒子（元素）是否應該浮動。

屬性值:

值	描述
left	元素向左浮動。
right	元素向右浮動。
none	默認值。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。
inherit	規(guī)定應該從父元素繼承 float 屬性的值。

元素怎樣浮動:

元素在水平方向浮動，即元素只能左右移動而不能上下移動。一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。浮動元素之后的元素將圍繞它。浮動元素之前的元素將不會受到影響。

清除浮動 - 使用 clear：

元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。clear 屬性指定元素兩側不能出現(xiàn)浮動元素。

注意：絕對定位的元素忽略float屬性！

2.3 CSS3 :checked 選擇器

:checked 選擇器匹配每個選中的輸入元素（僅適用于單選按鈕或復選框）。

2.4 CSS element+element 選擇器

element+element 選擇器用于選擇（不是內(nèi)部）指定的第一個元素之后緊跟的元素。

例如：選擇所有緊接著 <div> 元素之后的第一個 <p> 元素:

div+p{ background-color:yellow; }

3 代碼實現(xiàn)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   .Switch {
    padding: 0;
    width: 500px;
    margin: auto;
   }
 
   .Switch li {
    clear: both;
    line-height: 44px;
    border-bottom: 1px solid #CCC;
    list-style: none;
   }
 
   .Switch input {
    display: none
   }
 
   .Switch label {
    width: 52px;
    background: #CCC;
    height: 28px;
    border-radius: 14px;
    float: right;
    margin: 8px 10px 0 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
    cursor: pointer;
   }
 
   .Switch label em {
    width: 26px;
    height: 26px;
    float: left;
    margin: 1px;
    border-radius: 13px;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, .1);
    background: #FFF;
   }
 
   .Switch input:checked+label {
    background: #a4d714;
   }
 
   .Switch input:checked+label em {
    float: right;
   }
 
   .Switch input:disabled+label {
    opacity: 0.5
   }
  </style>
 </head>
 <body>
  <ul class="Switch">
   <li>
    <input type="checkbox" name="Storage" id="date">
    默認關閉
    <label for="date"><em></em></label>
   </li>
   <li>
    <input type="checkbox" name="Storage2" id="blance" checked="">
    默認打開
    <label for="blance"><em></em></label>
   </li>
   <li>
    <input type="checkbox" name="Storage2" id="integral" disabled="">
    不可用
    <label for="integral"><em></em></label>
   </li>
  </ul>
 </body>
</html>

如果你能讀到這里，小編希望你對“純CSS如何實現(xiàn)iOS風格打開關閉選擇框功能”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內(nèi)容的文章，歡迎關注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

純CSS如何實現(xiàn)iOS風格打開關閉選擇框功能

猜你喜歡

最新資訊

相關推薦

相關標簽