利用CSS3美化單選、復(fù)選按鈕的顯示樣式

發(fā)布時(shí)間：2017-01-11 16:59:31 作者：zzmisss

眾所周知，表單中的一寫元素原生樣式不是很好看，項(xiàng)目中用到的時(shí)候需要優(yōu)化，下面這篇文章主要介紹了如何利用CSS3美化單選、復(fù)選按鈕的顯示樣式,需要的朋友可以參考借鑒，下面來一起看看吧。

前言

相信大家都知道在表單元素中，單選按鈕和復(fù)選按鈕都具有選中和未選中狀態(tài)。要覆寫這兩個(gè)按鈕默認(rèn)樣式比較困難。在CSS3中，我們可以通過狀態(tài)選擇器“:checked”配合其他標(biāo)簽實(shí)現(xiàn)自定義樣式。利用CSS3我們可以打造非常具有個(gè)性化的用戶表單，本文中實(shí)現(xiàn)的效果非常不錯(cuò)，感興趣的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)。

效果圖如下

實(shí)例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>復(fù)選單選樣式</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    form {
      border: 1px solid #ccc;
      padding: 20px;
      width: 300px;
    }
    .wrapper {
      margin-bottom: 10px;
    }
    /*復(fù)選框*/
    .checkbox-box {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      position: relative;
      border: 2px solid orange;
      vertical-align: middle;
    }
    .checkbox-box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
      z-index:10;
    }
    .checkbox-box span {
      position: absolute;
      top: -10px;
      right: 3px;
      font-size: 30px;
      font-weight: bold;
      font-family: Arial;
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
      color: orange;
    } 
    .checkbox-box input[type="checkbox"] + span {
      opacity:0;
    }
    .checkbox-box input[type="checkbox"]:checked + span {
      opacity: 1;
    }

    /*單選框*/
    .redio-box {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 10px;
      position: relative;
      background: orange;
      vertical-align: middle;
      border-radius: 100%;
    }
    .redio-box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height:100%;
      z-index:100;/*使input按鈕在span的上一層，不加點(diǎn)擊區(qū)域會(huì)出現(xiàn)不靈敏*/
    }
    .redio-box span { 
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      position: absolute;
      background: #fff;
      top: 50%;
      left:50%;
      margin: -5px 0  0 -5px;
      z-index:1;
    }
    .redio-box input[type="radio"] + span {
      opacity: 0;
    }
    .redio-box input[type="radio"]:checked + span {
      opacity: 1;
    }
</style>
<body>
<h2>復(fù)選框：</h2>
<form action="#">

  <div class="wrapper">
    <div class="checkbox-box">
      <input name="1" type="checkbox" checked id="usename" />
      <span>√</span>
    </div>
    <label for="usename">體育</label>
  </div>
  
  <div class="wrapper">
    <div class="checkbox-box">
      <input name="1" type="checkbox"  id="usepwd" />
      <span>√</span>
    </div>
    <label for="usepwd">音樂</label>
  </div>

  <div class="wrapper">
    <div class="checkbox-box">
      <input name="1" type="checkbox"  id="checkbox3" />
      <span>√</span>
    </div>
    <label for="checkbox3">讀書</label>
  </div>
  
  <div class="wrapper">
    <div class="checkbox-box">
      <input name="1" type="checkbox"   id="checkbox4" />
      <span>√</span>
    </div>
    <label for="checkbox4">運(yùn)動(dòng)</label>
  </div>

</form> 


<h2>單選框</h2>
<form action="#">
  <div class="wrapper">
    <div class="redio-box">
      <input type="radio" checked="checked"  id="boy" name="1" /><span></span>
    </div>
    <label for="boy">男</label>
  </div>
  
  <div class="wrapper">
    <div class="redio-box">
      <input type="radio"  id="girl" name="1" /><span></span>
    </div>
    <label for="girl">女</label>
  </div>
</form> 

</body>
</html>

注意：

+ 是css的相鄰選擇符。

關(guān)系選擇符只有四種,是空格 > + ~ （包含選擇符、子選擇符、相鄰選擇符、兄弟選擇符）

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。謝謝大家對(duì)腳本之家的支持。