改变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. java实现——005从尾到头打印链表

    import java.util.Stack; public class T005 { public static void main(String[] args){ Node n1 = new No ...

  2. 内网服务器启动报错UNEXPECTED INCONSISTENCY解决方法

    一开始进入系统显示reboot and select proper boot device or insert boot media in selected boot device and press ...

  3. python unicode 转中文 遇到的问题 爬去网页中遇到编码的问题

    How do convert unicode escape sequences to unicode characters in a python string 爬去网页中遇到编码的问题 Python ...

  4. C# is 运算符

    is 运算符并不是说明对象是某种类型的一种方式,而是可以检查对象是否是给定的类型,或者是否可以转换为给定的类型,如果是,这个运算符就返回true.is 运算符的语法如下: <operand> ...

  5. 如何选择面向移动设备的html5开发框架

    很久以前整理了篇将手机网站做成手机应用的JS框架.时隔一年多,很多新的技术已经出现,下面再来总结下还有哪些框架是适合面向手机设备的开发的. 1.jQuery Mobile jQuery Mobile ...

  6. js原生设计模式——8单例模式之简约版属性样式方法库

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. Struts2的拦截器----Dog实例

    拦截器是一个类,这个类包含方法,用来解决DRY规则,即代码复用的问题.如果不调用拦截器,代码中需要显示通过代码调用目标方法,定义了拦截器,系统就会自动执行.大部分时候,拦截器方法都是通过代理的方式调用 ...

  8. 几种常用的控件（下拉框 可选框 起止日期 在HTML页面直接读取当前时间）

    下拉框 <div class="form-group">                        <label class="col-xs-3 c ...

  9. 纯代码实现CSS圆角

    我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了. 纯代码实现圆角主要有3种方法: 第一种:CSS3圆角   #chaomao{     border-radius:2px 2 ...

  10. void 0 === undefined

    http://www.cnblogs.com/fsjohnhuang/p/4146506.html