checkbox与radio美化效果

快乐打工仔 分类:实例代码

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美化效果就介绍到这了。

回复

我来回复
  • 暂无回复内容