<!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. Python爬虫Scrapy测试

    # -*- coding:utf- -*- import urllib import urllib2 import re import thread import time #糗事百科爬虫类 clas ...

  2. 百度之星资格赛 2016 Problem 1004

    本文链接:http://www.cnblogs.com/Ash-ly/p/5494630.html 题意: 熊所居住的 D 国,是一个完全尊重人权的国度.以至于这个国家的所有人命名自己的名字都非常奇怪 ...

  3. 百度MapAPI之地理编码

    地理编码:将具体地址数据转换为对应坐标点经纬度功能 大致思路: 1.从数据库取得具体地理位置 2.将地址作为参数访问API接口,获取返回数据 3.处理response数据并将经度(lng.longit ...

  4. 集训考试题（CF510C Fox And Names的简化版）

    题目描述给定n个由小写字母组成的字符串,请你求出一个字母表顺序,使得这n个字符串是按照字典序升序排列的,数据保证存在合法的字母表顺序.如果存在多个解,输出字典序最小的那个. 输入格式第一行一个整数n. ...

  5. Codeforces 856B - Similar Words

    856B - Similar Words 题意 如果一个字符串可以通过去掉首位字母得到另一个字符串,则称两个字符串相似. 给出一个字符串集合,求一个新的字符串集合,满足新集合里的字符串是原字符串集合中 ...

  6. sed replace HEX sequence in your binary file:

    Here is how to replace a HEX sequence in your binary file: $ sed 's/\x0D\x4D\x53\x48/\x0D\x0A\x4D\x5 ...

  7. [BZOJ4650][NOI2016]优秀的拆分(SAM构建SA)

    关于解法这个讲的很清楚了,主要用了设关键点的巧妙思想. 主要想说的是一个刚学的方法:通过后缀自动机建立后缀树,再转成后缀数组. 后缀数组功能强大,但是最令人头疼的地方是模板太难背容易写错.用这个方法, ...

  8. POJ 1180 Batch Scheduling（斜率优化DP）

    [题目链接] http://poj.org/problem?id=1180 [题目大意] N个任务排成一个序列在一台机器上等待完成(顺序不得改变), 这N个任务被分成若干批,每批包含相邻的若干任务. ...

  9. [Contest20180116]随机游走

    题意:给一棵树,多次询问$a$到$b$期望步数,每一步都是随机的 对期望DP了解更深入了一些 先预处理$up_x$表示从$x$走到$fa_x$的期望步数 可以直接往上走,也可以先去儿子再回来,设$x$ ...

  10. Exercise01_11

    public class Population{ public static void main(String[] args){ int sum,s; s=365*5*24*60*60; sum=31 ...