欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純CSS實現(xiàn)自定義單選框和復(fù)選框功能

  發(fā)布時間：2020-07-16 11:45:39   作者：java架構(gòu)學(xué)習(xí)基地   我要評論
這篇文章主要介紹了純CSS實現(xiàn)自定義單選框和復(fù)選框功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1 實現(xiàn)效果

2 知識點講解

2.1 <label>標(biāo)簽

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

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

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

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

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

2.2 CSS3 box-shadow 屬性

boxShadow 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關(guān)鍵字來規(guī)定。省略長度的值是 0。

語法：

box-shadow: h-shadow v-shadow blur spread color inset;

 2.3 CSS3 transition 屬性

transition 屬性用來設(shè)置元素過渡效果，四個簡寫屬性為：

transition-property

transition-duration

transition-timing-function

transition-delay

語法

transition: property duration timing-function delay;

  2.4 CSS3 :checked 選擇器

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

2.5 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">
      #main {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }
 
      #wrap {
        position: relative;
        margin: 10px;
      }
 
      .item {
        width: 100px;
        height: 100px;
        background-color: #9E9E9E;
        position: relative;
        box-shadow: 0 0 0 3px #dbe0e3;
        transition: all 0.5s;
        cursor: pointer;
      }
 
      .item img {
        width: 20px;
        height: 20px;
        position: absolute;
        bottom: 0px;
        right: 0px;
        opacity: 0;
      }
 
            input[type="radio"],
      input[type="checkbox"] {
        display: none;
      }
 
      input:checked+label .item {
        box-shadow: 0 0 0 3px #00a3ff;
        color: #FFFFFF;
        background-color: #efad4c;
      }
 
      input:checked+label .item img {
        opacity: 1;
      }
      
      .content {
        font-size: 30px;
        text-align: center;
        line-height: 100px;
      }
</style>
  </head>
  <body>
    <div id="main">
      
      <h1>多選</h1>
      <div id="wrap">
          <input type="checkbox" name="1" id="item1" />
        <label for="item1">
          <div class="item">
            <div class="content">
              1
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </label>
      </div>
      <div id="wrap">
      
        <input type="checkbox" name="1" id="item2" />
        <label for="item2">
          <div class="item">
            <div class="content">
              2
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </label>
      </div>
      <div id="wrap">
      
        <input type="checkbox" name="1" id="item3" />
        <label for="item3">
          <div class="item">
            <div class="content">
              3
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </label>
      </div>
      <div id="wrap">
      
        <input type="checkbox" name="1" id="item4" />
        <label for="item4">
          <div class="item">
            <div class="content">
              4
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </label>
      </div>
      <div id="wrap">
      
        <input type="checkbox" name="1" id="item5" />
        <label for="item5">
          <div class="item">
            <div class="content">
              5
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </label>
      </div>
      
      <h1>單選</h1>
      <div id="wrap">
          <input type="radio" name="1" id="item6" />
        <label for="item6">
          <div class="item">
            <div class="content">
              1
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </label>
      </div>
      <div id="wrap">
      
        <input type="radio" name="1" id="item7" />
        <label for="item7">
          <div class="item">
            <div class="content">
              2
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </label>
      </div>
      <div id="wrap">
      
        <input type="radio" name="1" id="item8" />
        <label for="item8">
          <div class="item">
            <div class="content">
              3
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </label>
      </div>
      <div id="wrap">
      
        <input type="radio" name="1" id="item9" />
        <label for="item9">
          <div class="item">
            <div class="content">
              4
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </label>
      </div>
      <div id="wrap">
      
        <input type="radio" name="1" id="item10" />
        <label for="item10">
          <div class="item">
            <div class="content">
              5
            </div>
            <img src="ico_checkon.svg" />
          </div>
        </label>
      </div>
    </div>
  </body>
</html>

到此這篇關(guān)于純CSS實現(xiàn)自定義單選框和復(fù)選框功能的文章就介紹到這了,更多相關(guān)css 自定義單選框和復(fù)選框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論