checkbox与radio美化效果

快乐打工仔发布于 3年前分类：实例代码

checkbox与radio美化效果属于前端实例代码，有关更多实例代码大家可以查看。

本章节分享一段代码实例，它实现了复选框和单选按钮的美化效果。

没有使用javascript，是使用纯css实现的，代码来源于网上。

感兴趣的朋友可以做一下参考。

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>

checkbox与radio美化效果，这样的场景在实际项目中还是用的比较多的，关于checkbox与radio美化效果就介绍到这了。

我来回复

暂无回复内容