checkbox与radio美化效果

2018-3-16 09:39| 发布者: admin| 查看: 607| 评论: 0|来自: 蚂蚁部落

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

没有使用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>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部