純css美化單選框(radio)樣式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <style>
 label{
 margin:5px;
 }
 .input-radio{
 display: none;
 }
 .span-radio{
 display: inline-block;
 border:1px solid #ccc;
 width:16px;
 height: 16px;
 border-radius:2px;
 vertical-align: middle;
 margin-right: 5px;
 position: relative;
 }
 .span-radio:before{
 content: '';
 font-size: 0;
 width: 10px;
 height: 10px;
 background: blue;
 position: absolute;
 left:50%;
 top:50%;
 margin-left: -5px;
 margin-top: -5px;
 border-radius: 2px;
 display: none;
 }
 /* ~代表選擇checked的后面的兄弟節(jié)點,顯示選中背景框*/
 .input-radio:checked~.span-radio:before{
 display: block;
 }
 </style>
</head>
<body>
<label>
 <input type="radio" name="evaluate" id="radio1" class="input-radio">
 <span class="span-radio"></span>優(yōu)
</label>
<label>
 <input type="radio" name="evaluate" id="radio2" class="input-radio">
 <span class="span-radio"></span>良
</label>
<label>
 <input type="radio" name="evaluate" id="radio3" class="input-radio">
 <span class="span-radio"></span>中
</label>
</body>
</html>

果圖

天和大家分享如何修改radio樣式

效果

自定義顏色

自定義圖片

代碼

全部代碼直接可以運行，兼容性ie，火狐，谷歌

景：自帶的單選按鈕真的是很不好看，這時候需要radio的自定義美化

Html 布局
 <ul class="prize-choose">
    <?php foreach ($goods as $key=> $data){?>
        <li class="item">
          //選中區(qū)域的熱區(qū)
              <label for="radio<?=$key +1 ?>" style="display: block;">
              <img src="">
              <p><?=!empty($data['name'])?$data['name']:'暫無名稱'?></p>
              <div class="detail"><?=$data['detail']?></div>
              <div class="price">
                  <p>
                  	<span class="now_price"><?=$data['sale_price']?></span>
                        <del>￥<?=$data['fix_price']?></del>
                  </p>
                  <div class="prize-radio" goods-price="<?=$data['sale_price']?>" goods-id="<?=$data['goods_id']?>">
                     <input type="radio" id="radio<?=$key +1 ?>" name="prizeradio">
                     <label for="radio<?=$key +1 ?>"></label>
                  </div>
             </div>
          </label>
      </li>
  <?php }?>
 </ul>

單選的局部代碼 //常規(guī)狀態(tài)
<div class="prize-radio">
  <input type="radio" id="radio<?=$key +1 ?>" name="prizeradio">
  <label for="radio<?=$key +1 ?>"></label>
</div>

//選中狀態(tài)，同radio
<input type="checkbox" id="awesome1" checked>
 //常規(guī)不可點
 <input type="checkbox" id="awesome2" disabled>
 //選中不可點擊
 <input type="checkbox" id="awesome3" disabled class="checked">

css 美化
.prize-radio{
      input[type="radio"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
      }
      input[type="radio"] + label {
        cursor: pointer;
        position: relative;
        line-height: 12px;
        user-select: none;
      }
      input[type="radio"] + label:not(:nth-of-type(1)) {
        margin-top: 29px;
        margin-bottom: 29px;
      }
      input[type="radio"]:checked + label{
        color: #0091FF;
      }
    //單選框的樣式
      input[type="radio"] + label::before{
        content: "";
        display: inline-block;
        width: 24px; height: 24px;
        border-radius: 50%;
        vertical-align: top;
        margin-right: .2em;
        border: 1px solid #ccc;
        background-color: #fff;
        transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
      }
      input[type="radio"]:not(:disabled) + label:hover::before{
        border-color: #0091FF;
      }
    //（制作樣式1）對勾樣式制作1 
      input[type="radio"] + label::after{
        content: "";
        display: inline-block;
        width: 5px;
        height: 13px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        position: absolute;
        left: 9px;
        top: 3px;
        transform: rotate(45deg) scale(0);
        transition: all .2s ease-in-out;
      }
      input[type="radio"]:checked + label::before{
        border-color: #0091FF !important;
        background-color: #0091FF;
      }
      input[type="radio"]:checked + label::after{
        transform: rotate(45deg) scale(1);
        transition: all .2s ease-in-out;
      }
    //不可點擊的背景色設(shè)置-----不常用
    input[type="checkbox"]:disabled + label::before,
    input[type="checkbox"]:disabled.checked + label::before{
      background-color: #f2f2f2;
    }
  //不可點擊的文本框?qū)搭伾O(shè)置--不常用
    input[type="checkbox"]:disabled.checked + label::after{
      border-color: #ccc;
      transform: rotate(45deg) scale(1);
    }
  //****制作樣式1 end******
  
    //***（制作樣式2）圓圈
  //after單選框中間的選中效果
  input[type="radio"] + label::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    left: 4px; top: 50%;
    transform: translateY(-50%) scale(0);
    transition: transform .2s ease-in-out;
  }

  input[type="radio"]:checked + label::after {
    transform: translateY(-50%) scale(1);
    transition: transform .2s ease-in-out;
  }
  //disabled 不常用
  input[type="radio"]:disabled + label::before,
  input[type="radio"]:disabled.checked + label::before {
    background-color: #f2f2f2;
  }
  //不常用
  input[type="radio"]:disabled.checked + label::after {
    border-color: #ccc;
    background-color: #ccc;
    transform: translateY(-50%) scale(1);
  }
  //****制作樣式2 end******
}

js傳參數(shù)操作：尤其涉及到交互，需要把選中商品的的id呀，價格呀，傳遞給后臺，這時候就常用的東西都如下操作啦

在線咨詢

上一篇：招聘中，快來！
下一篇：神經(jīng)內(nèi)科專業(yè)知識梳理

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

純css美化單選框(radio)樣式

效果

代碼

您的項目需求