radio和checkbox样式的修改

最新推荐文章于 2022-08-19 14:38:55 发布
最新推荐文章于 2022-08-19 14:38:55 发布
阅读量801 收藏
点赞数
分类专栏： 常用的样式以及板块
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/carior/article/details/78049834
版权

1.radio

/* radio */

input[type="radio"]:checked {
    background:url(../images/check2.png) -1px -2px;
    background-size: 15px;
    border:#00A0E9 1px solid;
}
input[type="radio"] {
    -webkit-appearance: none;
    border: 1px solid #00A0E9;;
    height: 15px;
    width: 15px;
    outline: none;
    vertical-align: middle;
    cursor: pointer;
}

 

关于radio还有一种在点击打开链接上看到，这里先拿过来记录一下

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.fancy-radio {
    display: block;
    font-weight: normal;
}
.fancy-radio input[type="radio"] {
    display: none;
}
.fancy-radio input[type="radio"] + span {
    display: block;
    cursor: pointer;
    position: relative;
    font-size: 13px;
}
.fancy-radio input[type="radio"] + span i {
    display: inline-block;
    vertical-align: middle;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    position: relative;
    bottom: 1px;
    content: "";
    border: 1px solid #ccc;
    width: 18px;
    height: 18px;
    margin-right: 5px;
}
.fancy-radio input[type="radio"]:checked + span i:after {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: block;
    position: relative;
    top: 3px;
    left: 3px;
    content: '';
    width: 10px;
    height: 10px;
    background-color: #99a1a7;
}
	</style>
</head>
<body>
	<label class="fancy-radio">
		<input name="gender" value="male" type="radio">
		<span><i></i>Male</span>
	</label>
	<label class="fancy-radio">
		<input name="gender" value="female" type="radio">
		<span><i></i>Female</span>
	</label>
</html>

 

 

 

 

 

2.checkbox

/* checkbox */

 input[type=checkbox] {    
        position: relative;   
    }    
    input[type=checkbox]::before{    
        content:'';    
        position: absolute;    
        width: 18px;    
        height: 18px;
        top: -4px;    
        background: url("../images/check1.png") no-repeat;    
    }    
    input[type=checkbox]:checked::before {    
        background: url("../images/check2.png") no-repeat;  
        content: '';    
    }   

 

关于checkbox还有一种在http://demo.cssmoban.com/cssthemes4/tid_5_klorofil/index.html上看到在这里先拿过来记录一下

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.fancy-checkbox {
    display: block;
    font-weight: normal;
}
.fancy-checkbox input[type="checkbox"] {
    display: none;
}
 .fancy-checkbox input[type="checkbox"] + span {
    margin-right: 0;
} 
.fancy-checkbox input[type="checkbox"] + span {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    font-size: 13px;
}
.fancy-checkbox input[type="checkbox"] + span:before {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    bottom: 1px;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    content: "";
    border: 1px solid #ccc;
}
.fancy-checkbox input[type="checkbox"]:checked + span:before {
    font-family: FontAwesome;
    /* content: '\f00c'; */
    font-size: 12px;
    color: #99a1a7;
    text-align: center;
    line-height: 16px;
    background: #ededed;
    border: 1px solid #ccc;
}
	</style>
</head>
<body>
	<label class="fancy-checkbox">
		<input type="checkbox"><span></span>
	</label>
</body>
</html>

 

input[type="radio"]
    {
        -webkit-appearance: none;/*让原本的样式不起作用（这是重点）*/
        border:1px solid #DADADA;/*分割线*/
        height:15px;
        width:15px;
        outline:none;
        vertical-align: middle;
        cursor: pointer;
    }
input[type="radio"]:checked
    { 
        background:#F34E51 url(../images/input_gou.png) 1px 2px;
        background-size: 13px;/*背景大小*/
    }
input[type="checkbox"]
    {
        -webkit-appearance: none;/*让原本的样式不起作用（这是重点）*/
        border:1px solid #DADADA;/*分割线*/
        height:15px;
        width:15px;
        outline:none;
        vertical-align: middle;
        cursor: pointer;
    }
input[type="checkbox"]:checked
    { 
        background:#F34E51 url(../images/input_gou.png) 1px 2px;
        background-size: 13px;/*背景大小*/
    }

 

 

 

 

3.还有关于select的样式后补

 

carior
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
09-单选框(radio)和复选框(checkbox）
学习&记录
05-28 320
全部勾选，可以先定位到所有的复选框，然后通过for循环一个个执行click()操作。通过is_selected()方法可以判断选项框是否为选中状态，该方法返回结果为bool类型，未选中时该方法返回False，选中时该方法返回True。有时候选项框本身就是已选中状态，如果再点击一下就反选了，这不是期望的结果，所以点击前需要先判断选项框是否已选中。勾选单个复选框，比如只勾选selenium，可以根据id定位到元素对象后调用click()点击即可。根据id进行定位，先单选“男”，3秒后切换为单选“女”。
修改radio样式
guizi0809的博客
07-15 3626
修改radio默认样式
html更改radio样式
Xiao_nan1110的博客
08-19 416
CSS更改radio样式+兼容
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1369
Document
改变单选按钮radio的默认样式
热门推荐
Preserve
05-08 3万+
默认的radio的样式很丑，那么如何改变其默认的样式呢？ 我最开始想的是能不能直接给radio设置背景色等，发现并没有用！可以借助于标签来创建一个类似于radio的效果。 先来看下效果： html代码如下: 在校生 非在校生 样式如下: .choice{ position: relative; } .choice .radio{ position: rela
修改radio、checkbox、select默认样式的方法
01-21 162
样式 radio select checkbox 兼容性 现在前端页面效果日益丰富，默认的input组件样式显然已经不能满足需求。趁着这次开发的页面中有这方面的需求，在这里整理一下修改radio、checkbox、select的方法。 首先上效果图： radio and checkbox 修改radio的默认样式有两种常用的方法 纯CSS 此方法需...
利用JavaScript更改input中radio和checkbox样式
10-29
利用JavaScript更改input中radio和checkbox样式的实现代码。
jQuery实现自定义checkbox和radio样式
10-23
jQuery 实现自定义 checkbox 和 radio 样式是一种常见的前端美化技术，它可以帮助开发者摆脱浏览器默认样式，创造出符合网站设计风格的交互元素。本篇将详细解释如何使用 jQuery 实现这一功能。 首先，我们要理解...
微信小程序如何修改radio和checkbox的默认样式和图标
10-16
主要介绍了微信小程序修改radio和checkbox的默认样式和图标,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
css：默认的checkbox、input、radio太丑了？手把手教你改变使用纯css3改写的带动画的默认样式
sunshine940326的博客
05-10 1万+
项目的github地址为： https://github.com/sunshine940326/css3formeledemo 本文首发于我的个人博客，http://cherryblog.site/ ；欢迎大家查看我的其他博客 最近在做公司后台的优化项目，拿到设计稿一看，设计师觉得默认的input、checkbox、radio太丑了，要优化，在做了几个demo之后找到了要怎么优化这些样
HTML单选按钮（Radio）样式更改以及多选按钮（Checkbox）样式更改
Hubert Biyo的博客
06-08 2万+
单选按钮更改样式： HTML代码： 人员（单选） test1
QSS灰色皮肤
有志者事竟成
10-06 529
QWidget#frmLogin,QWidget#frmPopup,QWidget#frmHostInfo,QWidget#frmLogout,QWidget#frmConfig,QWidget#frmData,QWidget#frmDefence,QWidget#frmHost,QWidget#frmMain,QWidget#frmPwd,QWidget#frmSelect,QWidget#fr
html如何替换radio默认图,总结：如何修改美化radio、checkbox的默认样式
weixin_31001855的博客
07-21 539
现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给元素设置为透明，然后通过定位让用户看到的是元素，利用css的原生属性来判断用户的操作，设置选中后的label样式,即input[t...
jquery type=radio 更改属性checked 选中 移除 选中
Xiao_QiangMa的博客
01-06 6532
1.   $("#id").attr("checked","checked");       $("#id").removeAttr("checked"); 2.    $('#id').prop("checked","checked").siblings().removeAttr("checked"); 注释：要用prop->atrr 。 对于HTML元素本身就带有的固有属性，
css技巧，如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
亿卢向倍的专栏
07-25 2009
 相信大家都遇到过这样的问题，大多数浏览器select选择框不能被直接修改样式，实在是不够美观，先看一下代码： 　　　　style type="text/css"> #box{ width: 500px; margin: 50px auto;} #box select{ width: 200px; height: 30px; bord
CSS自定义复选/单选框样式,更改checkbox、radio默认样式
liwangqi94的博客
06-21 2636
checkbox和radio作为网页比较常用的HTML组件,默认样式是无法更改的.单在网页美化中,时常需要更改其样式.此方法对checkbox、radio等都适用,下面以复选框checkbox为例.将置于复选框之后的label标签的for属性,设置为复选框的id.这样label标签就和复选框产生关联,点击label标签时,对应的复选框同样接收到数据.html代码如下:(checkbox的id值可以...
纯css3美化checkbox、radio默认样式
theScoreONE的博客
12-07 8576
一、效果展示 二、实现步骤 1、隐藏默认的样式 -webkit-appearance: none; appearance: none; outline: none; 2、css3的对号样式 content: "\2713"; 3、选中的css放到after选择器 input[type=checkbox]:c...
radio单选框checkbox复选框新样式 更改原生样式 toggle toggleClass hasClass
陈年雪菜粥
05-03 1765
<label class="sendType checked">白片</label> <label class="sendType">蜡块</label> .sendType { background: url(../img/uncheck.png) no-repeat; background-position: 0px 12px; } .checked { backgroun
css将checkbox的样式修改成和radio完全相同
最新发布
06-08
你可以使用 CSS 来修改 checkbox 的样式，使其和 radio 的样式完全相同。以下是一个示例代码： ```css input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值