改变radio默认样式
改变radio默认样式，代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>改变radio默认样式</title>
<style>
dd {
float:left;
line-height:37px;
}
dd:nth-child(3n+1) {
text-align:right;
width:164px;
}
input[type="radio"]{
display:none;
}
input[type="radio"]+label{
position:relative;
padding-left:30px;
line-height:20px;
color:#333;
font-weight:normal;
margin-left:2px;
}
label {
display:inline-block;
max-width:100%;
margin-bottom:5px;
font-weight:700;
}
input[type="radio"]+label::before {
content:"";
width:20px;
height:20px;
border-radius:20px;
border:1px solid #cecece;
position:absolute;
left:0;
}
input[type="radio"]:checked+label::after {
top:5px;
left:5px;
content:"";
background-color:#58B094;
width:12px;
height:12px;
border-radius:12px;
position:absolute;
vertical-align:middle;
}
</style>
</head>
<body>
<dl>
<dd>广告类型：</dd>
<dd>
<input id="adType1" name="adType" type="radio" value="1">
<label for="adType1">开屏</label>
<input id="adType2" name="adType" type="radio" value="2" checked="checked">
<label for="adType2">横幅</label>
<input id="adType3" name="adType" type="radio" value="3">
<label for="adType3">插屏</label>
<input id="adType4" name="adType" type="radio" value="4">
<label for="adType4">信息流</label>
<input id="adType5" name="adType" type="radio" value="5">
<label for="adType5">视频</label>
</dd>
<dd></dd>
</dl>
</body>
</html>
总结：
1、type="radio"的 id 和 label 的 for 属性值必须保持一致；
2、type="radio"的 name 属性值必须保持一致；
3、要改变 type="radio" 的默认样式，务必要设置如下：
input[type="radio"]{
display:none;
}
后再写自己想要的样式。
上面的样式很多是 CSS3样式，如果有不理解的地方，可以百度下，我也是第一次接触，最后想要提高自己的水平，还是要多敲代码，多思考，多虚心请教。
改变radio默认样式的更多相关文章
- 改变checkbox默认样式
input[type='checkbox']{ width: 5rem; height: 5rem; -webkit-appearance: none; /*清除复选框默认样式*/ backgroun ...
- 微信小程序开发——修改小程序原生checkbox、radio默认样式
复选框: 闲话少说,这里直接介绍如何修改小程序提供的复选框的样式,如原生的是这样的: 需要的是这样的: 示例代码: /*复选框外框样式*/ checkbox .wx-checkbox-input { ...
- ios改变系统默认样式
iso系统下默认不能修改submit样式,于是加上如下属性就可以修改: -webkit-appearance:none; -moz-appearance:none; 先记录下.
- 小程序 之修改radio默认样式
一.效果图 二.代码 /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */ radio .wx-radio-input.wx-radio-input-checked { bor ...
- 微信小程序radio组件 - 如何改变默认样式大小？
今天在写小程序的时候用到radio组件,但是很懊恼并未提供修改radio组件大小属性,第一感觉准备用css width , height 改变radio的大小,但是怎么搞也无法改变. 但是又不愿意搞个 ...
- 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式？
Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...
- 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- 用纯css改变下拉列表select框的默认样式
http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...
- 修改radio、checkbox、select默认样式的方法
样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...
随机推荐
- 用OpenSSL生成自签名证书在IIS上搭建Https站点（用于iOS的https访问）
前提: 先安装openssl,安装有两种方式,第一种直接下载安装包,装上就可运行:第二种可以自己下载源码,自己编译.这里推荐第一种. 安装包:http://slproweb.com/products/ ...
- Spring动态数据源的配置
Spring动态数据源 我们很多项目中业务都需要涉及到多个数据源,就是对不同的方法或者不同的包使用不同的数据源.最简单的做法就是直接在Java代码里面lookup需要的数据源,但是这种做法耦合性太高, ...
- brew udpate出现错误“/usr/local is not writable.”的问题解决
如图所示: 在命令行输入: sudo chown -R 当前登录的用户名 /usr/local 再次输入: brew update 问题解决.
- Linux ALSA声卡驱动之二：声卡的创建
1. struct snd_card 1.1. snd_card是什么 snd_card可以说是整个ALSA音频驱动最顶层的一个结构,整个声卡的软件逻辑结构开始于该结构,几乎所有与声音相关的逻辑设备都 ...
- S3C2440的定时器详解
还包含用于大电流驱动的死区发生器 位预分频器是可编程的,并且按存储在TCFG0和TCFG1寄存器中的加载值来分频PCLK 位递减计数器.当递减计数器到达零时,产生定时器中断请求通知CPU定时器操作已经 ...
- 试水mongodb er
1)data ready var a = {"name":"zhekou","CharDate":"2015-12-01" ...
- Xcode各版本官方下载
官方下载, 用开发者账户登录,建议用Safari浏览器下载. 官方下载地址: https://developer.apple.com/xcode/downloads/ Xcode 66.4: http ...
- Delphi中使用Dos窗口输出调试信息
在项目文件 *.DPR (Project->View Source) 里加上{$APPTYPE CONSOLE} 然后,在需要输出处加上 Writeln(‘your debug messa ...
- leangoo
leangoo网址:https://www.leangoo.com/
- 拓扑排序（Topological）
#define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include<stack&g ...