美化checkbox

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>chec</title>
<style>
#container {margin: 20px auto;}
#container span {position: relative;}
#container .input_check {position: absolute;visibility: hidden;}
#container .input_check+label {display: inline-block;width: 16px;height: 16px;border: 1px solid #ae8e37;}
#container .input_check:checked+label:after {content: "";position: absolute;left: 2px;bottom: 12px;width: 9px;height: 4px;
border: 2px solid #ae8e37;border-top-color: transparent;border-right-color: transparent;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);}

</style>
</head>
<body>

<h3></h3>

<div id="container">
<span><input type="checkbox" class="input_check" id="check3"><label for="check3"></label>111</span>
<span><input type="checkbox" class="input_check" id="check4"><label for="check4"></label>222</span>
</div>

</body>
</html>

时间: 2024-11-07 21:47:17

美化checkbox的相关文章

CSS案例 -- 美化checkbox框

在开发项目中,我们经常要美化checkbox框.下面是只用css实现checkbox选中美化 <div class='div-checkbox'> <input type="checkbox" id='handsome' /> <label for='handsome' >我很帅</label> </div> #handsome{ display:none; } .div-checkbox input + label { ba

HTML页面中的的美化checkbox

很多美工在设计页面是,为了美化页面经常使用图片来代替checkbox, html如下: <div class="checklayout"> <div class="checkbox01"> <img src="../images/checkbox01_noclick.png" name="hobby" id="01"> </div> <div class

CSS3和jQuery实现的自定义美化Checkbox

效果图: 是不是比默认的好看多了,个人的审美观应该还是可以的. 当然我们可以在这里查看DEMO演示. 接下来我们一起来看看实现这款美化版Checkbox的源代码.主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果. 先来看看HTML代码: <div class="wrapper"> <ul> <li> <p>Gender:</

ckeckbox的默认样式,label for添加toggle后失效,美化checkbox

首先要来吐槽一下火狐浏览器,缓存还是记住的checkbox的状态怎么样的.反正我先打开网页,再修改checkbox,添加一个checked true,默认选中,刷新火狐的页面,竟然没有效果,用其他浏览器测试都有效果....火狐要关闭当前网页,再打开才行,坑.....我测试在其他浏览器中修改checked,然后刷新页面,其他浏览器都可以看到修改后的状态,唯独,火狐,,,要关闭页面再打开才行.... 再说一个,之所以for绑定表单的原理是,绑定了点击事件,触发了表单中元素的点击事件,所以我想在一个l

css美化checkbox radio样式

/*check,radio*/ input.check_txt[type='checkbox']{ display: none; } input.check_txt[type='checkbox'] + label{ display: block; float: left; -moz-appearance: none; -webkit-appearance: none; width: 20px; height: 20px; background: #fff; border:2px solid #

HTML的checkbox和radio的美化

checkbox和radio的美化 checkbox: <style type="text/css"> input[type="checkbox"] { display: none; } input[type="checkbox"] + label { display: inline-block; position: relative; border: solid 2px #99a1a7; width: 35px; height: 3

基于CSS3自定义美化复选框Checkbox组合

今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox,每一个checkbox都有其各自的特点.有几款checkbox在选中的情况下还会出现动画效果,非常不错的CSS3自定义美化checkbox组合.另外,之前分享过的jQuery实现美化版的单选框和复选框也是非常不错. 在线预览   源码下载 实现的代码: <div class="container"> <div class="holder"> <div class=&qu

jQuery实现自定义checkbox和radio样式

jQuery实现自定义checkbox和radio样式 1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都知道在写结构的时候,radio或checkbox都会跟随label一起使用,label的for属性值和input的id值相同的情况下,点击label就可以选中input,这里正是利用label 来覆盖我们的input默认样式,通过给label添

自定义表单样式之checkbox和radio

1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都知道在写结构的时候,radio或checkbox都会跟随label一起使用,label的for属性值和input的id值相同的情况下,点击label就可以选中input,这里正是利用label 来覆盖我们的input默认样式,通过给label添加背景图片(美化的checkbox或radio),也就是