<!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. docker从零开始网络(七) 配置daemon和容器

    启用IPv6支持 在Docker容器或swarm服务中使用IPv6之前,需要在Docker守护程序中启用IPv6支持.之后,您可以选择将IPv4或IPv6(或两者)与任何容器,服务或网络一起使用. 注 ...

  2. 第三篇：使用firewall-cmd

    本文来源:Working with firewalld         其它参考文档:redhat官方中文文档 1.查询类命令 2.设置类命令 3.运行时zone设置 4.永久性zone设置 5.直接 ...

  3. Java多态机制和继承中重写重载

    关于Java中多态机制 http://www.cnblogs.com/chenssy/p/3372798.html 这篇博文讲的很透彻 大体意思是 多态定义: 多态就是指程序中定义的引用变量所指向的具 ...

  4. php必备树状数组处理方法

    thinkphp必备公共方法 /** * 子元素计数器 * @param array $array * @param int $pid * @return array */ function arra ...

  5. centos6.5 中文输入法图标和提示都不见了【解决】

    原因python升级引起的 两步解决: # vi /usr/bin/ibus-setup # vi /usr/libexec/ibus-ui-gtk 把这两个文件中的exec python 修改为 e ...

  6. summernote文本编辑内容在前端的显示

    1.summernote文本的编辑与文件的上传 在上一篇文章中,我们写了summernote文本编辑器的使用还有图片文件的上传,http://www.cnblogs.com/jingmin/p/659 ...

  7. [BZOJ 4034] 树上操作

    Link: BZOJ 4034 传送门 Solution: 树剖模板题…… Code: #include <bits/stdc++.h> using namespace std; type ...

  8. 【点分治】bzoj2152 聪聪可可

    模板题. #include<cstdio> #include<algorithm> #include<cstring> #include<cmath> ...

  9. 1.4（java学习笔记） 面向对象内存分析

      首先介绍几个概念 栈: 1.栈是方法执行的内存模型,每调用一个方法都会创建一个栈帧. 2.jvm为每个线程创建一个栈,存放方法相关信息,栈属于线程私有不共享. 3.栈由系统自动分配,是连续的内存空 ...

  10. 检测密码 Exercise06_18

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:检测密码 * */ public class Exercise06_18 ...