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 ...
随机推荐
- Git详细教程(1)---个人Git的基本使用
分布式版本控制系统--git 一.什么是Git 1.Git是什么 Git是目前世界上最先进的分布式版本控制系统(没有之一). 实际上版本控制系统有如下几个: 1) CVS 2) SVN 3) Git ...
- JAVA读取Excel中内容(HSSF和Workbook两种方法)
内容添加,以前是用的HSSF,前几天帮同学写一个统计表用了Workbook,现在码一下. ---新内容(Workbook)--- 同学要统计一个xls表格,让表1里面的某一列内容对表2里面的每列进行匹 ...
- Java暑期作业
一.假期观影笔记--<熔炉> 影片<熔炉>是根据发生在韩国光州聋哑学校里的真实事件而改编.影片讲述的是在一所聋哑儿童学校里,校长.教务以及老师披着慈善的华丽外衣对学校中的多名未 ...
- es6+react.js组件入门初探
React是一个用于构建用户见面的javascript库. React主要用于构建UI,许多人认为React是MVC中的V(视图) React起源于Facebook的内部项目,用来架设Instagra ...
- JAVA_SE基础——55.自定义异常类
在Java中已经提供了大量的异常类,但是这些异常类有时野很难满足开发者的要求,所以用户可以根据自己的需要来定义自己的异常类.但自定义的异常类必须继承自Exception或其子类. 可以自定义出的问题称 ...
- JAVA_SE基础——9.基本数据类型间的转换
前面我已经教会大家基本的数据类型进行了介绍, 然后这篇文章,我来介绍下,基本数据类型的转换. Java中有两种类型转换形式,分别是自动类型转换和强制类型转换. Step1.自动类型转换. 自动类型 ...
- python-装饰器简述
装饰器是什么 用来修饰别的函数的函数就可以称之为装饰器 这种函数的参数一般就是另外一个函数 也就是说,调用这种函数,需要给这种函数传参,且参数是函数 @语法糖 @语法糖一般用来表示装饰器函数 不用@也 ...
- Linux的安装和使用技巧
LinuxCentOs开始设置一个普通的用户,如果想进入root用户,可以su然后设置密码,然后第二次再次输入su,然后输入相同的密码就可以进去了 有很多命令需要在root下才能执行,但是在创建时却是 ...
- Python内置函数(56)——locals
英文文档: locals() Update and return a dictionary representing the current local symbol table. Free var ...
- tomcat 修改默认字符集
找到connector节点,插入 disableUploadTimeout="true" useBodyEncodingForURI="true" URIEnc ...