表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或者手机上,显示的效果总是不统一,而且难以修改器样式。

input[type="radio"] 样式定制

代码:

<form>
<p>
<input type="radio" name="gender" id="male" value="male">
<label for="male">男士</label>
</p>
<p>
<input type="radio" name="gender" id="female" value="female">
<label for="female">女士</label>
</p>
</form>

css 样式

input[type="radio"] {
height: 22px;
width: 22px;
margin-right: 10px;
display: none;
}
input[type="radio"] + label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 18px;
height: 18px;
margin-right: 10px;
border-radius: 50%;
border: 1px solid #003c66;
background: #fff;
line-height: 22px;
box-sizing: border-box;
}
input[type="radio"]:checked + label::before {
background-color: #003c66;
background-clip: content-box;
padding: 3px;
}

效果如图:

input[type="checkbox"] 样式定制

代码:

<form>
<input id="select_all" name="select_all" type="checkbox">
<label for="select_all"> <i></i>选择</label>
</form>

css 样式

input[type="checkbox"] {
display: none;
} input[type="checkbox"]+label>i {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #bbb;
background: #bbb;
margin-right: 10px;
vertical-align: middle;
} input[type="checkbox"]:checked+label>i {
position: relative;
} input[type="checkbox"]:checked+label>i::before {
content: '';
position: absolute;
width: 12px;
height: 18px;
color: black;
border-bottom: 1px solid green;
border-right: 1px solid green;
left: 50%;
top: 20%;
transform-origin: center;
transform: translate(-50%, -30%) rotate(40deg);
-webkit-transform: translate(-50%, -30%) rotate(40deg);
}

效果如图:

定制 input[type="radio"] 和 input[type="checkbox"] 样式的更多相关文章

  1. 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  2. <input type="radio" >与<input type="checkbox">值得获取

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  3. 关于jq操作table下多个type=radio的input的选中

    假如有2个table: <table id="table1" border="0"> <tr> <td><input ...

  4. 点击DIV触发其他元素的点击事件(案例:点击type="radio" 的input 标签外层DIV,触发内部单选点击选中事件)

    方法一: 直接用找到对应dom元素调用.click()方法 $('.user_content').click(function(){ $(this).children()[0].click(); // ...

  5. 纯css兼容个浏览器input[type='radio']不能自定义样式

    各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异   //html <div class="remember-a ...

  6. css 能改变input type radio和checkbox 圆圈或方框的大小

    把input隐藏,外面套label,再里面加个span,样式写在span上,让label覆盖在span上面,js去改active的class <label for="remember& ...

  7. input(type="checkbox"|type="radio")+jquery使用

    1.用.is(":checked")判断input是否为选中状态 例: var value=$(this).is(":checked"); localStora ...

  8. 原生javascript自定义input[type=radio]效果

    2018年6月27日 更新 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> ...

  9. 自定义input[type="radio"]的样式

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...

随机推荐

  1. 在Windows上安装Gradle

    1.开发环境 (1)Java:JDK8(必须是JDK或JRE7以上,使用java -version查看当前电脑java版本) (2)操作系统:Windows 7 2.安装步骤 (1)下载最新的Grad ...

  2. ADB三个进阶使用

    adb通过Wi-Fi连接手机 背景知识 Android系统底层运行着一个服务(adbd),也就是在手机系统内部,用于响应.管理大家在电脑端的adb命令连接,这个服务在启动时候会根据手机的配置监听USB ...

  3. tomcat catalina.out日志切割(logrotate)

    简单说明: 1,因为tomcat日志会一直往catalina.out里面输出,所以回到值catalina.out非常大,占用磁盘空间 2,日志非常大,查看日志就需要很长时间. 3,据说catalina ...

  4. SQL Server 的 RowGuid/RowGuidCol 是什么意思?

    SQL Server 中设计表时,有个属性叫 RowGuid(用 SQL 时,关键词是 RowGuidCol),这个是什么意思呢?这个是全局唯一标识符,与“标识”不同,标识是只在本表中唯一,全局唯一标 ...

  5. html基础笔记-表单、链接

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 字符编码U ...

  6. 转:Web 开发中很实用的10个效果【附源码下载】

    原文地址:http://www.cnblogs.com/lhb25/p/10-useful-web-effect.html 在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多 ...

  7. 【转】Nginx学习---Nginx&&Redis&&hcache三层缓存架构总结

    [原文]https://www.toutiao.com/i6594307974817120782/ 摘要: 对于高并发架构,毫无疑问缓存是最重要的一环,对于大量的高并发,可以采用三层缓存架构来实现,n ...

  8. pt-heartbeat工具监控MySQL复制延迟

    pt-heartbeat工作原理: 1,在主库上的某个数据库A中创建一张heartbeat表,按照一定的时间频率更新该表的字段(把时间更新进去). 2,从主库连接到从上的这个数据库A中检查复制的时间记 ...

  9. MPT树详解

    目录 MPT树定义 MPT树的作用是什么? 前缀树与默克尔树 前缀树 默克尔树 三种节点类型 MPT中的Merkle HP编码 官方表示形式 相关MPT树 参考目录 @ MPT树定义 一种经过改良的. ...

  10. sublime设置node.js编译

    1. 首先需安装node环境并配置好环境变量,安装教程. 2. 然后在sublime中打开工具(Tools)→编译系统(Build System)→新编译系统(New Build System) 3. ...