修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式
表单中,经常会使用到单选按钮和复选框,但是,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"] 的默认样式的更多相关文章
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- input type="file"在各个浏览器下的默认样式,以及修改自定义样式
一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...
- <input type="radio" >与<input type="checkbox">值得获取
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 关于jq操作table下多个type=radio的input的选中
假如有2个table: <table id="table1" border="0"> <tr> <td><input ...
- 点击DIV触发其他元素的点击事件(案例:点击type="radio" 的input 标签外层DIV,触发内部单选点击选中事件)
方法一: 直接用找到对应dom元素调用.click()方法 $('.user_content').click(function(){ $(this).children()[0].click(); // ...
- 去掉或者修改 input、select 等表单的【默认样式 】
隐藏input等表单的默认样式的背景: textarea,select,input{-webkit-appearance: none; -moz-appearance: none; -o-appear ...
- 微信小程序修改radio和checkbox的默认样式和图标
wxml: <view class="body"> <view class="body-content"> 第1题:企业的价值观是 ? ...
- 更改checkbox的默认样式
最近做一个vue项目要用到checkbox要修改默认样式,选中是纯白色,不选择只有白色边框,起初以为很容易,没想到还折腾了一翻,记录一下. 几经折腾,理清input 和label的关系 最终改进版本, ...
- 改变checkbox的默认样式
针对于CheckBox默认样式的改变,和选中状态的改变 <label class="checkBox"><input type="checkbox&qu ...
随机推荐
- visual studio 单元测试的认识
单元测试(unit testing),对软件中的最小单元进行检查和验证,其一般验证对象是一个函数或者一个类. Team Test 是 Visual Studio 集成的单元测试框架,它支持: 测试方法 ...
- 适用于 Windows 的自定义脚本扩展
自定义脚本扩展在 Azure 虚拟机上下载并执行脚本. 此扩展适用于部署后配置.软件安装或其他任何配置/管理任务. 可以从 Azure 存储或 GitHub 下载脚本,或者在扩展运行时将脚本提供给 A ...
- sql server 存储过程的学习
存储过程学习笔记 存储过程就是一条或者多条sql语句的集合,为了实现特定任务,而将一些需要多次调用的固定操作语句编写成程序段,这些程序段存储在服务器上,有数据库服务器通过程序来调用.T_SQL:存储过 ...
- orcl创建数据库
1.首先先创建一个文件夹存放数据库目录:d:cs 用户及密码为cs 2.创建表空间: create tablespace csdatafile 'O:\cs\cs.dbf' size 5 ...
- WCF 基于 WinForm 宿主 发布
ServiceHost Host = new ServiceHost(typeof(ServiceHTTP)); //绑定 System.ServiceModel.Channels.Binding h ...
- NHibernate出现could not execute query问题
今天在调试代码时工程总报错,提示could not execute query xxxxxxxxxxxxxxxxxxxxxxxxxxx 找了很久,最终同事发现是数据库连接配置文件的问题. <hi ...
- 【9】python关于os模块与os.path的相关操作
---恢复内容开始--- #__author:"吉*佳" #date: 2018/10/20 0020 #function: # os模块知识点 import os # 获取平台名 ...
- 加载驱动三种execute
executeQuery executeUpdate executeQueryBatch
- 2-5 R语言基础 factor
#因子:分类数据#有序和无序#整数向量+标签label#Male/Female#常用于lm(),glm() > x <- factor(c("female"," ...
- 【洛谷】【单调栈】P1901 发射站
[题目描述:] 某地有 N 个能量发射站排成一行,每个发射站 i 都有不相同的高度 Hi,并能向两边(当 然两端的只能向一边)同时发射能量值为 Vi 的能量,并且发出的能量只被两边最近的且比 它高的发 ...