使用<label>标签修改input[type="checkbox"]的样式
因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上.
<form>
<input type="checkbox" name="sex" id="male" />
<label for="male">Male</label>
</form>
所以正适合用于修改input的样式.
进入正文, 修改input[type="checkbox"]的样式
默认样式: 选定前选定后;
/*选定前*/
#male + label::before{ /*设置label标签的伪元素*/
content: "\a0"; /*不换行空格*/
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #999;
}
/*选定时*/
#male:checked + label::before{
content: "\2714"; /*√*/
text-align: center;
background-color: rgb(68, 171, 247);
}
/*取消默认框*/
#male{
display: none;
}
设置后的样式:选定前选定后;
本文只是简单描述修改input[type="checkbox"]样式的原理,其他不足之处请谅解
使用<label>标签修改input[type="checkbox"]的样式的更多相关文章
- 自定义input[type="checkbox"]的样式
对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...
- CSS修改input[type=range]滑块样式
input[type="range"]是html5中的input标签新属性,样子如下: <input type="range" value="4 ...
- 原生javascript自定义input[type=checkbox]效果
2018年6月27日 更新 能用css3,就不用js 用纯css3实现样式重写 <!DOCTYPE html> <html lang="en"> < ...
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- css 更改input radio checkbox的样式
html <label> <input type="checkbox" class="colored-blue"> <span c ...
- 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- input[type="checkbox"]与label对齐
项目中遇到文字与 checkbook 无法水平对齐, 源码如下: <div align='center'> <input type="checkbox" id=& ...
- 关于复选框input[type=checkbox]
关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
随机推荐
- 代码审计-数组返回NULL绕过
<?php $flag = "flag"; if (isset ($_GET['password'])) { if (ereg ("^[a-zA-Z0-9]+$&q ...
- web权限验证方法说明[转载]
前言 本文将会从最基本的一种web权限验证说起,即HTTP Basic authentication,然后是基于cookies和tokens的权限验证,最后则是signatures和一次性密码. HT ...
- MySQL数据库 介绍,安装,基本操作
- 数据库介绍: 1.随意存放在一个文件中的数据,数据的格式千差万别 tank|123 jason:123 sean~123 2.软件开发目录规范 - Project: - conf - bin - ...
- python27期day04:列表、元组、range、作业题。
1.for循环套for循环: for i in "abc": for x in "egf: print(x) 结果是:e g f e g f e g f 2.99乘法表 ...
- Fishing Master (思维+贪心)
题目网站:http://acm.hdu.edu.cn/showproblem.php?pid=6709 Problem Description Heard that eom is a fishing ...
- Oracle工具PLSQL
2018版的PLSQL美化工具在Tools中的PL/SQL Beautifier中 如下:
- 在 Asp.Net Core 中安装 MVC
在 ASP.NET Core 中安装 MVC 到目前为止,我们在本系列视频中使用的 ASP.NET Core 项目是使用“空”项目模板生成的.目前这个项目没有设置和安装 MVC. 两个步骤学会在 AS ...
- [LeetCode] 419. Battleships in a Board 平板上的战船
Given an 2D board, count how many battleships are in it. The battleships are represented with 'X's, ...
- [LeetCode] 305. Number of Islands II 岛屿的数量之二
A 2d grid map of m rows and n columns is initially filled with water. We may perform an addLand oper ...
- [LeetCode] 39. Combination Sum 组合之和
Given a set of candidate numbers (candidates) (without duplicates) and a target number (target), fin ...