<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>自定义radio/checkbox样式</title>

<style>

*{

    padding: 0;

    margin: 0;

}

input[type=checkbox]{

    display: none;

}

/*未选中样式*/

.checkbox{

    color: green;

}

/*选中样式（(可以设置背景图片等)*/

input[type=checkbox]:checked + .checkbox{

    color: red;

}

</style>

</head>

<body>

   <label>

       <input type="checkbox" name="" id="" value="" />

       <span class="checkbox">是否选择</span>

   </label>

</body>

</html>

自定义radio/checkbox样式的更多相关文章

  1. 使用CSS实现自定义input[checkbox]样式

    思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...

  2. 自定义 radio 的样式，更改选中样式

      思路: 1. 可以为<label>元素添加生成性内容(伪元素),并基于单选按钮的状态来为其设置样式: 2. 然后把真正的单选按钮隐藏起来: 3. 最后把生成内容美化一下. 解决方法: ...

  3. 微信小程序 - radio/checkbox自定义组件

    更新 2019-01-26:首次发布 2019-01-27:增加默认取值选中radio/checkbox,checkbox需在onload取值 2019-01-28:增加radio取值不存在红色提示和 ...

  4. WPF 自定义CheckBox样式

    自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...

  5. 巧用CSS3伪类选择器自定义checkbox和radio的样式

    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...

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

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

  7. 自定义checkbox样式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 二十四、小程序中改变checkbox和radio的样式

    来源:https://blog.csdn.net/qq_39364032/article/details/79742415 在微信小程序里面,有时候为了配合整个项目的风格,checkbox和radio ...

  9. 自定义input[type="radio"]的样式（支持普通浏览器，IE8以上）

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...

随机推荐

  1. Selenium2+python自动化41-绕过验证码（add_cookie）【转载】

    前言 验证码这种问题是比较头疼的,对于验证码的处理,不要去想破解方法,这个验证码本来就是为了防止别人自动化登录的.如果你能破解,说明你们公司的验证码吗安全级别不高,那就需要提高级别了. 对于验证码,要 ...

  2. hadoop3.1 分布式集群部署

    1.环境准备 Centos7.5系统 hadoop版本3.1 1.1资源分配 主机名 地址 角色 node01 10.10.0.11 namenode node02 10.10.0.12 second ...

  3. [BZOJ4556][Tjoi2016&Heoi2016]字符串 主席树+二分+倍增+后缀自动机

    4556: [Tjoi2016&Heoi2016]字符串 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1215  Solved: 484[S ...

  4. AC日记——Dynamic Problem Scoring codeforces 807d

    Dynamic Problem Scoring 思路: 水题: 代码: #include <cstdio> #include <cstring> #include <io ...

  5. ubuntu下执行ulimit返回“不允许的操作”，问题解决思路

    在ubuntu下执行ulimit,希望修改允许的最大打开文件数,但返回“不允许的操作”. 使用ulimit -a查看当前配置 core file size (blocks, -c) 0 data se ...

  6. linux：/lib/libc.so.6: version `glibc_2.7′ not found【没有解决】采用新方法达到目的

    1 下载glibc wget http://ftp.gnu.org/pub/gnu/glibc/glibc-2.7.tar.gz 2. tar zxf glibc-2.7.tar.gz 3. cd g ...

  7. 洛谷——P1033 自由落体

    P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,…．n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...

  8. hadoop遇到的问题（汇总）

    1. 如果Map和reduce的输出不一致,需要显示的设置Map的输出,没有根据参数进行推导的原因是类型擦除 combiner是在copy数据到机器之前可以进行的一些数据的合并,这和数据有关,不是所有 ...

  9. VS code 的变量设定

    文档来自https://code.visualstudio.com/docs/editor/variables-reference 预定义的变量有: ${workspaceFolder} - the ...

  10. CodeForces - 986C AND Graph

    不难想到,x有边连出的一定是 (2^n-1) ^ x 的一个子集,直接连子集复杂度是爆炸的...但是我们可以一个1一个1的消去,最后变成补集的一个子集. 但是必须当且仅当 至少有一个 a 等于 x 的 ...