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

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

成都創(chuàng)新互聯(lián)憑借專業(yè)的設(shè)計團(tuán)隊扎實的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識和豐厚的資源優(yōu)勢，提供專業(yè)的網(wǎng)站策劃、網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站優(yōu)化、軟件開發(fā)、網(wǎng)站改版等服務(wù)，在成都10年的網(wǎng)站建設(shè)設(shè)計經(jīng)驗，為成都上千中小型企業(yè)策劃設(shè)計了網(wǎng)站。

1 效果

2 知識點

2.1 標(biāo)簽

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

標(biāo)簽語法格式：

文本內(nèi)容

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

中時，就需要使用form屬性來指定所屬表單；

元素沒有特別的樣式考慮——結(jié)構(gòu)上，是簡單的行內(nèi)元素，所以可使用和或元素大致相同的方式來應(yīng)用樣式。

2.2 CSS float 屬性

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

屬性值:

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

元素怎樣浮動:

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

清除浮動 - 使用 clear：

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

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

2.3 CSS3 :checked 選擇器

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

2.4 CSS element+element 選擇器

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

例如：選擇所有緊接著

元素之后的第一個

元素:

div+p{ background-color:yellow; }

3 代碼實現(xiàn)



 
  
  
  
   .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
   }
  
 
 
  
   
    
    默認(rèn)關(guān)閉
    
   
   
    
    默認(rèn)打開
    
   
   
    
    不可用

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

網(wǎng)站欄目：純CSS如何實現(xiàn)iOS風(fēng)格打開關(guān)閉選擇框功能
當(dāng)前URL：http://weahome.cn/article/iicjgd.html