<!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. (2)Flutter vscode安装

    1. vscode搜索Flutter 点击安装Flutter会自动安装Flutter和Dart 2.打开项目 在vscode File-openFolder打开之前创建的项目 成功显示 如果创建一个新 ...

  2. ubantu的python2与python3的相关兼容更新问题

    Ubuntu14.04, 系统内同时装了Python3.3 和 2.7用sudo apt-get install python-pipsudo apt-get install python3-pip分 ...

  3. codeforces 869A The Artful Expedient【暴力枚举/亦或性质】

    A. time limit per test 1 second memory limit per test 256 megabytes input standard input output stan ...

  4. HDU 2087 剪花布条【在字符串中不可重叠地寻找子串数量】

    一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢?  Input输入中含有一些数据,分别是成对出现的花布条和 ...

  5. 欧拉图和欧拉圈-Play On Words(UVa10129)

    欧拉路和欧拉圈,简言之就是,从无向图的一个结点出发,走一条路/圈,每条边恰好经过一次,即一笔画问题 欧拉定理:一个无向图最多只有两个奇结点,那么我们就从一个奇结点出发,到另一个结点为之,一定有一条欧拉 ...

  6. 单词接龙(dragon)（BFS）

    单词接龙(dragon) 时间限制: 1 Sec  内存限制: 64 MB提交: 12  解决: 5[提交][状态][讨论版] 题目描述 单 词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已 ...

  7. 25、Django实战第25天：讲师详情页

    1.复制teacher-detail.html到templates目录下 2.编辑teacher-detail.html,继承base.html 3.编辑organization.view.py cl ...

  8. 【点分治】【哈希表】bzoj2599 [IOI2011]Race

    给nlog2n随便过的跪了,不得已弄了个哈希表伪装成nlogn(当然随便卡,好孩子不要学)…… 不过为啥哈希表的大小开小点就RE啊……?必须得超过数据范围一大截才行……谜 #include<cs ...

  9. 【三维偏序】【分块】bzoj3262 陌上花开

    裸的三维偏序. 对x坐标排序,y.z坐标分块.复杂度O(n*sqrt(n*log(n))).代码很短. #include<cstdio> #include<cmath> #in ...

  10. 【AC自动机/fail树】BZOJ3172- [Tjoi2013]单词

    [题目大意] http://www.lydsy.com:808/JudgeOnline/problem.php?id=3172 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多 ...