如何改变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 #fd8845;
}
#container .input_check:checked+label:after {
content: "";
position: absolute;
left: 2px;
bottom: 12px;
width: 9px;
height: 4px;
border: 2px solid #fd8845;
border-top-color: transparent;
border-right-color: transparent;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-45deg);
}
</
style
>
</
head
>
<
body
>
<
h3
>利用css的:after跟transform属性代替checkbox效果</
h3
>
<
div
id
=
"container"
>
<
span
><
input
type
=
"checkbox"
class
=
"input_check"
id
=
"check3"
><
label
for
=
"check3"
></
label
></
span
>
<
span
><
input
type
=
"checkbox"
class
=
"input_check"
id
=
"check4"
><
label
for
=
"check4"
></
label
></
span
>
</
div
>
</
body
>
</
html
>
转http://www.tuicool.com/articles/uMzeQf
如何改变checkbox的样式的更多相关文章
- 改变checkbox默认样式
input[type='checkbox']{ width: 5rem; height: 5rem; -webkit-appearance: none; /*清除复选框默认样式*/ backgroun ...
- $('.goods_tag_ids_all')[0].checked = true;//~~~~~ 单条改变checkbox 属性样式
//点击左边全选选中时,都全选$('.goods_tag_ids_all').on('click',function(){ if($('.goods_tag_ids_all').is(':checke ...
- 改变checkbox的默认样式
针对于CheckBox默认样式的改变,和选中状态的改变 <label class="checkBox"><input type="checkbox&qu ...
- 用纯css改变默认的radio和checkbox的样式
利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...
- 自定义input[type="checkbox"]的样式
对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...
- css美化checkbox的样式
使用iCheck插件可以改变checkbox.radio的原有样式,但是改变的样式尺寸有些大修改起来也比较麻烦,并且需要使用iCheck的调用方法才能使用,有时候iCheck方法还会覆盖掉同级元素的c ...
- 如何在鼠标hover时改变标注的样式
如何在鼠标hover时改变标注的样式? ---------------- 教程 ----------------------- 首先创建1张地图 //初始化地图对象,加载地图 var map ...
- 改变radio默认样式
改变radio默认样式,代码如下: <!doctype html> <html> <head> <meta charset="UTF-8" ...
- xamarin android checkbox自定义样式
xamarin android checkbox自定义样式 在drawable文件在新建checkbox_bg.xml文件 <?xml version="1.0" encod ...
随机推荐
- Monkey之常用ADB命令(新猿旺学习总结)
查看 adb 版本 adb version获取连接设备及状态 adb dev ...
- asp.net core 同时添加Identity和Bearer认证
是这样的,网上介绍的Oauth认证一般都是授权服务器和资源服务器分开,但是我只想在一个网站中使用asp.net core自带的Identity认证给用户访问网站用,同时提供一些api接口通过Token ...
- vue 添加旋转图片 修改css transform 值
//点击放大图片并旋转图片 conponents组建 <template> <!-- 过渡动画 --> <transition name="fade ...
- 2018年-2019年第二学期第五周C#学习个人总结
在本周我学习了第五章面向对象高级中的5.3多态,5.3多态中主要包括重写父类方法,多态的实现,base关键字,里氏转换原则,Object类.在重写父类方法中要求当重写父类的方法时,要求子类的方法名,参 ...
- HTML解析之BeautifulSoup
BeautifulSoup是一个用于从HTML和XML文件中提取数据的Python库.BeautifulSoup提供一些简单的.函数用来处理导航.搜索.修改分析树等功能.BeautifulSoup模块 ...
- win10 1803版本unable to start ssh-agent service, error :1058
PowerShell安装了pshazz或者posh-git,但是打开的时候提示 unable to start ssh-agent service, error :1058 1803的设置上面可以看到 ...
- Pandorabox(Openwrt) 双宽带(WAN) 叠加网络实战
准备 一台已经刷好Pandorabox(Openwrt)的路由器.两条宽带 实战环境 固件:PandoraBox R8.1.12 By Lean 硬件:K2P A1版 过程 配置VLAN 为了将一个L ...
- js随机数的取整
- 防cc攻击策略
黑客攻击你的网站,会采取各种各样的手段,其中为了降低你网站的访问速度,甚至让你的服务器瘫痪,它会不断的刷新你的网站,或者模拟很多用户同一时间大量的访问你的网站, 这就是所谓的CC攻击,这就需要我们在程 ...
- lua相关的小知识
lua的特性 1. 轻量级:一标准的C语言编写原发开放,编译后仅仅100K,占用内存小: 2. 扩展性:Lua提供了非常已于使用的扩展口和机制: 3. 支持面向过程编程和函数式编程 lua的数据类型 ...