修改 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 ...
随机推荐
- android 解决连接电视机顶盒失败的方法
今天在开发过程中,需要连接海美迪的电视盒子,这个盒子是基于android6.0的版本,之前连接其它电视盒子都正常,当输入 adb -s xxxx shell后,盒子连接失败,日志如下: error: ...
- win Server 2008 笔记
1.开启tsmmc 远程登录连接 需要在入站规则中启用一下规则 远程管理(RPC-EPMAP) 远程管理(RPC) 远程管理(RPCNP-IN) 远程管理(TCP-IN) 远程管理 - RemoteF ...
- Sr Software Engineer - Big Data Team
Sr Software Engineer - Big Data Team About UberWe’re changing the way people think about transport ...
- How HashMap works in java 2
https://www.javacodegeeks.com/2014/03/how-hashmap-works-in-java.html Most common interview questio ...
- Android高级_第三方框架Xutils
xutils的功能主要包括有四个部分:(1)布局视图关联:(2)图片下载与缓存:(3)网络请求:(4)数据库: 1. 使用xutils进行视图注入: (1)在控件声明上方添加@ViewInject() ...
- ShellCode初体验
写在前面的话: ShellCode是一门艺术,就像围棋手门追求的“神之一手”,今天就来初探一下这让人疯狂的艺术: 零.代码0 相信手写opcode,目前很少有人干了,其实,也确实已经没有这个必要了,毕 ...
- 微软撤回sharepoint 2013 sp1
微软撤回sharepoint 2013 sp1, 现在已经不能下载32bits和64bits. 以下是我们发现的问题(未必一定和SP1有关) - Search SSA managed metadata ...
- SDN期末
一.项目描述 负载均衡程序 二.小组分工 组名:我们真的很弱 组员:李佳铭.吴森杰.张岚鑫.薛宇涛.杨凌澜 三.代码演示及过程描述 四.课程总结
- myeclipse10配置maven
一:Maven的下载安装 准备工作: 1)安装环境 Windows xp 2)需安装JDK ,并配置环境变量(略) 3) Maven版本3.0.5 4)下载地址:http://mirror.bit.e ...
- 使用mpVue开发小程序实战总结
1.图形验证码接口返回base64格式的数据,使用image标签接收不显示问题. 解决方法: 使用wx.base64ToArrayBuffer和wx.arrayBufferToBase64转化一遍数据 ...