改变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默认样式的更多相关文章

  1. 改变checkbox默认样式

    input[type='checkbox']{ width: 5rem; height: 5rem; -webkit-appearance: none; /*清除复选框默认样式*/ backgroun ...

  2. 微信小程序开发——修改小程序原生checkbox、radio默认样式

    复选框: 闲话少说,这里直接介绍如何修改小程序提供的复选框的样式,如原生的是这样的: 需要的是这样的: 示例代码: /*复选框外框样式*/ checkbox .wx-checkbox-input { ...

  3. ios改变系统默认样式

    iso系统下默认不能修改submit样式,于是加上如下属性就可以修改: -webkit-appearance:none; -moz-appearance:none; 先记录下.

  4. 小程序 之修改radio默认样式

    一.效果图 二.代码 /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */ radio .wx-radio-input.wx-radio-input-checked { bor ...

  5. 微信小程序radio组件 - 如何改变默认样式大小？

    今天在写小程序的时候用到radio组件,但是很懊恼并未提供修改radio组件大小属性,第一感觉准备用css width , height 改变radio的大小,但是怎么搞也无法改变. 但是又不愿意搞个 ...

  6. 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式？

    Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...

  7. 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  8. 用纯css改变下拉列表select框的默认样式

    http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...

  9. 修改radio、checkbox、select默认样式的方法

    样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...

随机推荐

  1. S3C2440启动代码2440init.s彻底解析

    可以选择nand启动和nor启动,这两者之间的关系通过一个按键来选择 这个OM0有何玄机,在数据手册中有这么一段 位宽RAM启动了(当然,还得设置一些东西,下面就说), Nanaflash启动经历的过 ...

  2. iOS动画特效 分类： ios技术 2015-05-15 16:29 311人阅读 评论(0) 收藏

    关于图层的几个坐标系. 对于ios来说,坐标系的(0,0)点在左上角,就是越往下,Y值越大.越往右,X值越大. 一个图层的frame,它是position,bounds,anchorPoint和tra ...

  3. 【转】安卓Java的虚拟机区别

    Google于2007年底正式发布了Android SDK, 作为 Android系统的重要特性,Dalvik虚拟机也第一次进入了人们的视野.它对内存的高效使用,和在低速CPU上表现出的高性能,确实令 ...

  4. Jmeter 新手

    转载:http://www.cnblogs.com/TankXiao/p/4059378.html 什么是压力测试 顾名思义:压力测试,就是  被测试的系统,在一定的访问压力下,看程序运行是否稳定/服 ...

  5. 使用Linux自定义自动补全命令完善自己的shell脚本

    对于Linuxer来说,自动补全是再熟悉不过的一个功能了.当你在命令行敲下部分的命令时,肯定会本能地按下Tab键补全完整的命令,当然除了命令补全之外,还有文件名补全. Bash-completion ...

  6. 基因探针富集分析（GSEA）& GO & pathway

    http://blog.sina.com.cn/s/blog_4c1f21000100utyx.html GO是Gene Ontology的简称,是生物学家为了衡量基因的功能而而发起的一个项目,从分子 ...

  7. php常用图片处理类

    <?php /** * 已知问题:1.在图片缩放功能中,使用imagecreatetruecolor函数创建画布,并使用透明处理算法,但PNG格式的图片无法透明.用imagecreate函数创建 ...

  8. Windows API 函数浏览

    AbortDoc                                          终止一项打印作业                        是         是        ...

  9. ASP.NET MVC中使用异步控制器

    线程池 一直想把项目改写成异步,但是ASP.NETMVC3下写的过于繁琐,.NET 4.5与ASP.NET MVC下代码写起来就比较简单了, MS好像也一直喜欢这样搞,每一个成熟的东西,都要演变好几个 ...

  10. SQL server 定时自动执行SQL存储过程

    当一个存储过程是为了生成报表,并且是周期性的,则不需要人工干预,由SQL作业定时自动执行些SQL存储过程即可. 本示例,假设已需要定时执行的存储过程为:Pr_test 工具/原料 SQL Server ...