<!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. eclipse出现build path 错误

    右击本项目-build path-config build path-libraries-发现有选项是带错误符号,于是点击edit然后点击alternative jre选择安装了的jre就解决问题了

  2. mysql union用法代码示例

    MYSQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时 ...

  3. 错误 NETSDK1068: 框架依赖型应用程序主机需要一个至少 “netcoreapp2.1” 的目标框架

    错误 NETSDK1068: 框架依赖型应用程序主机需要一个至少 “netcoreapp2.1” 的目标框架 我有一个ASP.NET Core 2网站应用程序,编译运行都没有问题,但是发布时却出了错, ...

  4. HDU 3342 拓扑排序模板

    Legal or Not Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  5. HDU 1558 Segment set（并查集）

    题意: 给你一些线段的起点和终点的坐标,最后问和某个线段相连的或者间接相连的线段有多少个(包括本身)? P X1 Y1X2 Y2  起点(X1,X2)终点(X2,Y2):按照出现次数依次编号为1,2, ...

  6. HDU1754I Hate It（线段树）

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  7. 算法-插入排序(Insertion sorting)

    本文由@呆代待殆原创,转载请注明出处. 简介:这是一个比较算法,形象的描述插入算法就和我们玩扑克的时候我们排列手牌的方式是一样的,最开始我们手上什么都没有,然后我们每摸一张牌就把它插入到正确的位置,直 ...

  8. 加密连接工具Cryptcat

    加密连接工具Cryptcat   Cryptcat是网络工具Netcat的加密版本.Cryptcat支持TCP.UDP两种网络协议.它可以在两个计算机之间建立指定的连接,并使用特定的密钥对传输数据进行 ...

  9. Java高级架构师（一）第30节：把应用部署到Linux服务器上

  10. 51单片机软件I2C驱动中的CY

    做一个MSP430的项目,虽然430内部有硬件I2C的模块,略难,准备直接移植51的..碰到一句代码 dat <<= 1; //移出数据的最高位 pSDA = CY; //送数据口 dig ...