Css实现checkbox及radio样式自定义
前言
checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议。随着用户对产品体验要求越来越高,我们都会对checkbox和radio重新设计,checkbox默认的样式非常丑 ,无法直接修改checkbox和radio的样式,这里我们借助label标签来对它进行样式美化。
先看实现效果图,如下:
实现思路
1.设置input 属性hidden对该input进行隐藏,或者通过display:none也可以
2.借助label for标签通过id绑定input ,这样在点击label时实际就是点击了input
3.定义label的样式,设置未选中状态的背景图
.advice{
height: 12px;
width: 12px;
display: inline-block;
background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
margin-top: -4px;
}
4.使用相邻选择器设置选中状态label的样式
input[type="radio"]:checked + .advice{
background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
}
实现代码
请选择反馈的问题:
问题
建议
1
.advice { }
input[type="radio"]:checked + .advice { }
{ }
以上是radio单选框的实现代码,checkbox也是类似 将input type定义成checkbox即可
获取radio及checkbox选中的值
1.获取radio的值
使用jquery获取radio的值有3种方式:
$('input
Css实现checkbox及radio样式自定义的更多相关文章
- css input checkbox和radio样式美化
参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...
- 自定义checkbox, radio样式
17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...
- 自定义checkbox, radio样式总结
任务目的 深入了解html label标签 了解CSS边框.背景.伪元素.伪类(注意和伪元素区分)等属性的设置 了解CSS中常见的雪碧图,并能自己制作使用雪碧图 任务描述 参考 样例(点击查看),实现 ...
- checkbox、radio设置自定义样式
老生常谈,做一个简单的记录.浏览器自带的checkbox和radio样式可能不符合项目要求,通常要做一些自定义样式设置,目前基本的解决思路都是将input[type=checkbox/radio]隐藏 ...
- 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
- input美化 checkbox和radio样式
input美化 checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...
- 表单:checkbox、radio样式(用图片换掉默认样式)
checkbox.radio样式(用图片换掉默认样式) <!doctype html> <html> <head> <meta charset="u ...
- 利用纯CSS美化checkbox和radio和滑动按钮的实现
W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式 一, 单选按钮 <html> <head> ...
- css自定义checkbox和radio样式
很常见的问题,也有许多人写过类似的文章,自己写来记录下 css代码如下: #myCheck + label,.myRadio + label{ width:16px; height:16px; bor ...
随机推荐
- Java基础学习笔记二十一 多线程
多线程介绍 学习多线程之前,我们先要了解几个关于多线程有关的概念.进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 线 ...
- vue小白快速入门
一.vue是什么 Vue 是一套用于构建用户界面的渐进式框架. 压缩后仅有17kb 二.vue环境搭建 你直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量. 但在用 ...
- Leetcode 28——Implement strStr()
Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle ...
- Windows下Apache的下载安装启动停止
一:下载 打开任意浏览器,输入网址:http://httpd.apache.org/ 进入如下界面: 我们选择最新版Apache httpd 2.4.12Released,点击Download,进入如 ...
- Beta No.2
今天遇到的困难: 组员对github极度的不适应 Android Studio版本不一致项目难以打开运行 移植云端的时候,愚蠢的把所有项目开发环境全部搬上去.本身云的内存小,性能差,我们花费了太多时间 ...
- python 操作SQLAlchemy
SQLAlchemy python链接 pymysql mysql+pymysql://<username>:<password>@<host>/<dbnam ...
- bzoj千题计划276:bzoj4515: [Sdoi2016]游戏
http://www.lydsy.com/JudgeOnline/problem.php?id=4515 把lca带进式子,得到新的式子 然后就是 维护树上一次函数取min 一个调了一下午的错误: 当 ...
- 服务器磁盘阵列数据恢复,raid5两块硬盘掉线数据恢复方法
[用户单位信息] 农业科学研究院某研究所 [磁盘阵列故障发生过程描述]客户的DELL MD1000服务器内置15块1TB硬盘搭建为RAID5磁盘阵列阵列,服务器在正常工作中有一块硬盘离线,管理员对磁盘 ...
- GIT入门笔记(5)- 创建版本库
版本库又名仓库,英文名repository,可以简单理解成一个目录, 这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以追踪历史,或者在将来某个时刻 ...
- 新概念英语(1-73)The way to King Street
The way to King Street 到国王街的走法Why did the man need a phrasebook?Last week Mrs. Mills went to London. ...