前言

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样式自定义的更多相关文章

  1. css input checkbox和radio样式美化

    参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...

  2. 自定义checkbox, radio样式

    17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...

  3. 自定义checkbox, radio样式总结

    任务目的 深入了解html label标签 了解CSS边框.背景.伪元素.伪类(注意和伪元素区分)等属性的设置 了解CSS中常见的雪碧图,并能自己制作使用雪碧图 任务描述 参考 样例(点击查看),实现 ...

  4. checkbox、radio设置自定义样式

    老生常谈,做一个简单的记录.浏览器自带的checkbox和radio样式可能不符合项目要求,通常要做一些自定义样式设置,目前基本的解决思路都是将input[type=checkbox/radio]隐藏 ...

  5. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  6. input美化 checkbox和radio样式

    input美化    checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...

  7. 表单:checkbox、radio样式(用图片换掉默认样式)

    checkbox.radio样式(用图片换掉默认样式) <!doctype html> <html> <head> <meta charset="u ...

  8. 利用纯CSS美化checkbox和radio和滑动按钮的实现

    W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式 一, 单选按钮 <html> <head> ...

  9. css自定义checkbox和radio样式

    很常见的问题,也有许多人写过类似的文章,自己写来记录下 css代码如下: #myCheck + label,.myRadio + label{ width:16px; height:16px; bor ...

随机推荐

  1. Git详细教程(1)---个人Git的基本使用

    分布式版本控制系统--git 一.什么是Git 1.Git是什么 Git是目前世界上最先进的分布式版本控制系统(没有之一). 实际上版本控制系统有如下几个: 1) CVS 2)  SVN 3) Git ...

  2. JAVA读取Excel中内容(HSSF和Workbook两种方法)

    内容添加,以前是用的HSSF,前几天帮同学写一个统计表用了Workbook,现在码一下. ---新内容(Workbook)--- 同学要统计一个xls表格,让表1里面的某一列内容对表2里面的每列进行匹 ...

  3. Java暑期作业

    一.假期观影笔记--<熔炉> 影片<熔炉>是根据发生在韩国光州聋哑学校里的真实事件而改编.影片讲述的是在一所聋哑儿童学校里,校长.教务以及老师披着慈善的华丽外衣对学校中的多名未 ...

  4. es6+react.js组件入门初探

    React是一个用于构建用户见面的javascript库. React主要用于构建UI,许多人认为React是MVC中的V(视图) React起源于Facebook的内部项目,用来架设Instagra ...

  5. JAVA_SE基础——55.自定义异常类

    在Java中已经提供了大量的异常类,但是这些异常类有时野很难满足开发者的要求,所以用户可以根据自己的需要来定义自己的异常类.但自定义的异常类必须继承自Exception或其子类. 可以自定义出的问题称 ...

  6. JAVA_SE基础——9.基本数据类型间的转换

    前面我已经教会大家基本的数据类型进行了介绍,   然后这篇文章,我来介绍下,基本数据类型的转换. Java中有两种类型转换形式,分别是自动类型转换和强制类型转换. Step1.自动类型转换. 自动类型 ...

  7. python-装饰器简述

    装饰器是什么 用来修饰别的函数的函数就可以称之为装饰器 这种函数的参数一般就是另外一个函数 也就是说,调用这种函数,需要给这种函数传参,且参数是函数 @语法糖 @语法糖一般用来表示装饰器函数 不用@也 ...

  8. Linux的安装和使用技巧

    LinuxCentOs开始设置一个普通的用户,如果想进入root用户,可以su然后设置密码,然后第二次再次输入su,然后输入相同的密码就可以进去了 有很多命令需要在root下才能执行,但是在创建时却是 ...

  9. Python内置函数(56)——locals

     英文文档: locals() Update and return a dictionary representing the current local symbol table. Free var ...

  10. tomcat 修改默认字符集

    找到connector节点,插入 disableUploadTimeout="true" useBodyEncodingForURI="true" URIEnc ...