自定义常用input表单元素二：纯css实现自定义radio单选按钮

这是接着上一篇纯css自定义复选框checkbox的第二篇，自定义一个radio单选按钮，同样，采用css伪类和“+”css选择器为思路，下面是预览图：

下面直入主题放代码：HTML部分

<!--两个name相同的radio-->
<input type="radio" id="my_radio1" class="my_radio" name="my_radio"><label for="my_radio1">单选Radio1</label>
<br />
<input type="radio" id="my_radio2" class="my_radio" name="my_radio">
<label for="my_radio2">单选Radio2</label>

HTML代码没什么说的，就是普通的label和input,定义相同的name即可。

下面为CSS部分：

/*radio单选主要样式*/
.my_radio{opacity: 0;}
.my_radio+label::before {content: "";display: block;width: 16px;height: 16px;border-radius: 100%;border: 1px solid #d9d9d9;position: absolute;top: 3px;left: -24px;box-sizing: border-box;
}.my_radio:hover+label::before {-webkit-transition: all .3s;transition: all .3s;border-color: #1890ff
}.my_radio:checked+label::after {content: "";display: block;width: 8px;height: 8px;border-radius: 100%;background-color: #1890ff;position: absolute;top: 7px;left: -20px;border-color: #1890ff;-webkit-transition: all .3s;transition: all .3s;
}

四行css，第二行为radio最外层的圆圈,第四行为radio最里面选中时的实心圆。第三行为radio hover时的效果。其他样式自己可根据需要修改。

转载于:https://www.cnblogs.com/websharehome/p/9622090.html

自定义常用input表单元素二：纯css实现自定义radio单选按钮相关推荐

HTML基本语法之表单标签：表单的组成，表单域，表单控件元素（表单元素），input表单元素， label标签，表单控件（表单元素）， select表单元素， textarea表单元素
文章目录表单标签表单的组成表单域常用属性: 表单控件元素(表单元素) input表单元素 label标签表单控件(表单元素) select表单元素 textarea表单元素表单元素几个总结 ...
表单标签——input表单元素、select下拉表单元素和textarea文本域
表单标签表单的目的是为了收集用户信息.在网页中,我们也要跟用户进行交互,收集用户资料,此时就需要表单. 表单的组成:在HTML中,一个完整的表单通常由表单域.表单控件(也称为表单元素)和提示信息三部 ...
input表单元素required用法
input表单元素required用法定义和用法 required 属性是一个布尔属性. required 属性规定必需在提交表单之前填写输入字段. 注意:required 属性适用于下面的 inp ...
HTML一些常用的表单元素,表单元素-HTML中常用的表单元素
HTML中常用的表单元素有datalist.keygen.output. 1.datalist datalist元素规定输入域的选项列表.列表通过datalist内的option元素创建的. 如需把d ...
JS禁止input表单元素手动输入方法(转)
第二种方法本人测试可用 1. 替代法使用隐藏的<input type="file"/>控件,然后用一个只读的文本框和一个按钮来模拟<input type=&q ...
oracle数据库表单,Oracle常用数据库系统表单以及SQL的整理
因为最近涉及到了一些数据库的归档,备份等工作,所以一部分的重心放在了数据库上,毕竟之前对数据库的了解也只停留在了一般的建表,查询,最多最多再写一写触发器之类的东西. 通常都是自己瞎搞搞,也就懂一点皮毛 ...
第三章表单与表单元素
学习目标理解表单的作用理解表单与表单元素的关系掌握表单标签及其属性掌握各种表单元素标签及其属性在Web网页中,浏览者经常需要与Web服务器进行数据交互.当浏览者需要填写数据并将这些数据发送到 ...
html元素全屏右键显示覆盖,HTML表单元素覆盖样式元素问题及其补救之道
HTML表单元素覆盖样式元素问题及其补救之道更新时间:2006年07月27日 00:00:00 作者: 在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题,图一就是一个典型的例子 ...
table中加表单元素怎么验证_element-ui 解决 table 里包含表单验证的问题！
实际项目中的场景,需要在table里做表单的验证,如图效果: 其实问题关键就在于如何给el-form-item动态绑定prop :prop="'tableData.' + scope.$in ...

自定义常用input表单元素二：纯css实现自定义radio单选按钮

自定义常用input表单元素二：纯css实现自定义radio单选按钮相关推荐

最新文章

热门文章