利用CSS 修改input=radio的默认样式(改成选择框)
html部分:
<input id="item2" type="radio" name="item">
<label for="item2"></label>
abel for属性规定与表单元素绑定
radio单选框, 相同的name名字可以达到互斥的作用
CSS部分:
input[type="radio"] {
opacity:; //设置透明度,隐藏原有input样式
}
label {
position: absolute;
left: 90%;
top: 10px;
width: 20px;
height: 20px;
border: 1px solid #999;
}
input:checked+label { 相邻同胞选择器,选择被选中的input标签后 第一个label标签 [input 和 label标签有共同的父元素];
background-color: #ff3334;
border: 1px solid #ff3334;
}
css样式会应用在紧随着 "勾选的input元素" 后面(同级)的 " label元素的:after "上。
也就是说,input框如果被用户勾选了,其后面的label元素会有相应的样式变化
input:checked+label::after {
position: absolute;
content: "";
width: 5px;
height: 10px;
top: 3px;
left: 6px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
实现效果:
参考文章: https://www.jianshu.com/p/d3ad2d76f039
利用CSS 修改input=radio的默认样式(改成选择框)的更多相关文章
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- css修改select下拉列表的默认样式
select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...
- css 更改input radio checkbox的样式
html <label> <input type="checkbox" class="colored-blue"> <span c ...
- CSS修改input[type=range]滑块样式
input[type="range"]是html5中的input标签新属性,样子如下: <input type="range" value="4 ...
- css取消input、select默认样式(手机端)
IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...
- <input type='file'/>把默认样式改成框框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css自定义 range radio select的样式滑轮,按钮,选择框
写在前面: 之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式.当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面.对此做个 ...
- 【转】html5中如何去掉input type date默认样式
html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码: 选择日期:<input type="date" value="2017 ...
- html5中如何去掉input type date默认样式
html5中如何去掉input type date默认样式 1.时间选择的种类: HTML代码: 选择日期:<input type="date" value="20 ...
随机推荐
- SQL group by 分组后,同一组的排序后取第一条
SELECT * FROM( SELECT [SPID] ,[PH1] ...
- JSON.parse()和JSON.stringify()的使用
parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":&qu ...
- foo是什么?
在英文程序员社区里,foo bar baz这些词是常用于作为占位符而使用的.要查wiki的话,这项更合适:http://en.wikipedia.org/wiki/Metasyntactic_vari ...
- Appium之uiautomator定位元素
元素定位方式有多种,Android也有自身独有的定位方式.下面就单独介绍其基于uiautomator定位元素的方法: 基本语法: driver.find_element_by_android_uiau ...
- CYUSB3014固件部分低版本工程在Eclipse中编译得到img文件时无效的解决方案
最近在做基于我们AC6102开发板的UVC图像视频方案,下载了官方的an75779应用工程,但是倒入到FX3—SDK自带的Eclipse中后,却无法编译生成img文件,经过比对后确认是生成该文件的命令 ...
- asp.net部署时加密config文件
1:运行cmd,并定位到C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727(可以直接运行vs2005的命令提示工具,但是貌似vs2010默认指向的framewo ...
- FIREDAC(DELPHI10 or 10.1)提交数据给ORACLE数据库的一个不是BUG的BUG
发现FIREDAC(DELPHI10 or 10.1)提交数据给ORACLE数据库的一个不是BUG的BUG,提交的表名大小写是敏感的. 只要有一个表名字母的大小写不匹配,ORACLE就会认为是一个不认 ...
- ASP.NET Core2集成Office Online Server(OWAS)实现办公文档的在线预览与编辑(支持word\excel\ppt\pdf等格式)
Office Online Server是微软开发的一套基于Office实现在线文档预览编辑的技术框架(支持当前主流的浏览器,且浏览器上无需安装任何插件,支持word.excel.ppt.pdf等文档 ...
- osx上使用'cd'命令跳转到别名(alias)目录
在mac上使用windows的共享目录时,在terminal中时法使用cd的,会提示"xxx 不是目录",经过一番的查找,发现了Mac Terminal 'cd' to folde ...
- [Erlang34]erlang.mk的源码阅读1-入门makefile
通过erlang.mk项目,掌握基本的makefile语法,可以自己定制makefile. 1. makefile 基本规则: 1. 所有的源文件没有被编译过,则对各个源文件进行编译并进行链接,生成最 ...