改变radio/checkbox样式

直接上代码

.item input[type="radio" ] {
        width: 20px;
        height: 20px;
        background: #fff;
        -webkit-appearance: none;
        border: 1px solid #999;
    }

    .item input[type="radio" ]:checked {
        background:url("../img/select.png");
        background-size: cover;
    }

得到的结果就是radio的样式由圆形改为了正方形,被选中打勾。

checkbox同理。

起重要作用的就是-webkit-appearance: none,默认样式清除,然后就可以自己需要设置了。

原文地址:https://www.cnblogs.com/ob99012/p/8580902.html

时间: 2024-10-10 20:06:36

改变radio/checkbox样式的相关文章

自定义radio/checkbox样式

<!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; } /*选

改变radio的点(美化radio)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>改变radio的点</title> <style> *{padding:0px; margin:0px;} .radio_list{display: none;} .radio_list +label{-webkit-appearance:none;

巧用CSS3伪类选择器自定义checkbox和radio的样式

由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的checkbox和radio,然后用js实现选中和未选中时候的样式,用来模拟checkbox和radio. 例如这种: 用其他元素模拟(以checkbox为例): <div class='checkbox'></div> $('.checkbox').click(function(){

checkbox和radio的样式美化问题

如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对定位的方式,手动切换checked和unchecked的图片,定位到原来input显示的地方: 2.使用jQuery的iCheck插件 . 中文DOC地址:http://www.bootcss.com/p/icheck/ github地址:https://github.com/fronteed/iC

论checkbox和radio的样式美化问题

如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对定位的方式,手动切换checked和unchecked的图片,定位到原来input显示的地方: 2.使用jQuery的iCheck插件 . 中文DOC地址:http://www.bootcss.com/p/icheck/ github地址:https://github.com/fronteed/iC

纯css自定义checkbox和radio的样式

以上是结构.说明一下,这样写是为了展示点击文字即可选中的两种方式,因为之前我一直忽略了第二种方法. css部分也是分开写的,其实基本一样,只是为了更直观看清楚: div{ width:200px; height:100px; background:#013879; padding:15px; color:#fff; font-size:14px;} 改变checkbox: .checkbox{ width:12px; height:13px; background:#fff; border:1p

用css改变默认的checkbox样式

自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html> <html> <head> <meta charset="utf-8"> <title>chec</title> <style> #wrapper {margin: 20px auto;} #wrapper .i

自定义input[type=&quot;radio&quot;]的样式

对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: html: <form action=""> <div class="sex"> <div class="female"> <label for="female">女</label>

自定义CheckBox样式

1.自定义效果图   2.准备图片选中和未选中的图片      2.1 图片和文件名                      btn_check_off.png btn_check_on.png      2.2 项目结构 3.编写样式文件      3.1 项目文件结构      3.2 checkbox_style.xml代码 <selectorxmlns:android="http://schemas.android.com/apk/res/android"> &l