checkbox與radio美化效果

admin發表於2018-03-16
本章節分享一段程式碼例項，它實現了核取方塊和單選按鈕的美化效果。

沒有使用javascript，是使用純css實現的，程式碼來源於網上。

感興趣的朋友可以做一下參考。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<link rel="stylesheet" href="http://forsigner.com/magic-check/css/bundle.css">
</head>
<body>
<div class="container">
  <div class="row content">
    <div class="col-md-6 container-checkbox clearfix">
      <h4 class="text-right" style="padding-right: 10px;">Checkbox</h4>
        <div class="clearfix">
          <input class="magic-checkbox" type="checkbox" name="layout" id="1" value="option1">
          <label class="pull-right" for="1"></label>
          <label class="pull-right text" for="1">Normal</label>
        </div>
        <div class="clearfix">
          <input class="magic-checkbox" type="checkbox" name="layout" id="2" checked="checked">
          <label class="pull-right" for="2"></label>
          <label class="pull-right text" for="2">Checked</label>
        </div>
 
        <div class="clearfix">
          <input class="magic-checkbox" type="checkbox" name="layout" id="3" value="option2" disabled="disabled">
          <label class="pull-right" for="3"></label>
          <label class="pull-right text" style="color: #ccc;" for="3">
            Disabled
          </label>
        </div>
        <div class="clearfix">
          <input class="magic-checkbox" type="checkbox" name="layout" id="4" checked="checked" disabled="disabled">
          <label class="pull-right" for="4"></label>
          <label class="pull-right text" style="color: #ccc;" for="4">
            Checked && Disabled
          </label>
        </div>
      </div>
      <div class="col-md-6 container-radio clearfix">
        <h4>Radio</h4>
        <div>
          <input class="magic-radio" type="radio" name="radio" id="11" value="option1">
          <label for="11">
            Normal
          </label>
        </div>
 
        <div>
          <input class="magic-radio" type="radio" name="radio" id="22" value="option2" checked>
          <label for="22">
            Checked
          </label>
        </div>
 
        <div>
          <input class="magic-radio" type="radio" id="33" value="option2" disabled="disabled">
          <label for="33" style="color: #ccc;">
            Disabled
          </label>
        </div>
 
        <div>
          <input class="magic-radio" type="radio" id="44" value="option2" disabled="disabled" checked="checked">
          <label for="44" style="color: #ccc;">
            Checked && Disabled
          </label>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

相關文章