改变单选按钮radio的默认样式

蔚落 2022-08-22 00:19 349阅读 0赞

默认的radio的样式很丑，那么如何改变其默认的样式呢？  
我最开始想的是能不能直接给radio设置背景色等，发现并没有用！可以借助于标签来创建一个类似于radio的效果。

先来看下效果：

![Center][]

html代码如下:

<div class="choice">
    	<label class="radio">在校生<input type="radio" name="radio" value="1" checked><i></i></label>
    	<label class="radio">非在校生<input type="radio" value="2" name="radio"><i></i></label>
    </div>

样式如下:

.choice{
    	position: relative;
    }
    .choice .radio{
    	position: relative;
    	display: inline-block;
    	font-weight: 400;
    	color: #0c4757;
    	padding-left: 25px;
    	cursor: pointer;
    }
    .choice .radio input{
    	position: absolute;
    	left: -9999px;
    }
    .choice .radio i{
    	display: block;
    	position: absolute;
    	top: 6px;
    	left: 0;
    	width: 15px;
    	height: 15px;
    	outline: 0;
    	border: 1px solid #47a8c0;
    	background: #9cd9e8;
    	border-radius: 50%;
    	transition: border-color .3s
    	-webkit-transition: border-color .3s;
    }
    .choice .radio input:checked+i{
    	border-color: #0c4757;
    }
    .choice .radio input+i:after{
    	position: absolute;
    	content: '';
    	top: 3px;
    	left: 3px;
    	width: 9px;
    	height: 9px;
    	border-radius: 50%;
    	background-color: #47a8c0;
    	opacity: 0;
    	transition: opacity .1s;
    	-webkit-transition: opacity .1s;
    }
    .choice .radio input:checked+i:after{
    	opacity: 1;
    }

demo地址：http://zhsisusie.github.io/IFE/Task31\_5\_8/index.html

[Center]: /images/20220724/e866db5aa2c24b87b189d263db197662.png

发表评论取消回复

表情：

评论列表（有 0 条评论，349人围观）

还没有评论，来说两句吧...

相关阅读

相关单选按钮radio无法通js改变状态的情况

今天通过js设置radio为选中状态的方法死活不会生效，试了多种操作： $("\r1").attr("checked",true); $("\r1").attr("chec

川长思鸟来/ 2023年10月18日 14:36/ 0 赞/ 53 阅读

相关 vue-element：修改radio-button（单选框按钮）的样式

一、设置宽度（由于无法直接设置span的宽度） ![20210519121438614.png][] <el-radio-button label="上海">这里有

￡神魔★判官ぃ/ 2023年01月22日 09:57/ 0 赞/ 26 阅读

相关改变单选按钮radio的默认样式

默认的radio的样式很丑，那么如何改变其默认的样式呢？我最开始想的是能不能直接给radio设置背景色等，发现并没有用！可以借助于标签来创建一个类似于radio的效果。

蔚落/ 2022年08月22日 00:19/ 0 赞/ 350 阅读

相关 input radio,改装input单选框样式，单选框input修改默认样式

HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

缺乏、安全感/ 2022年04月08日 15:29/ 0 赞/ 396 阅读

相关监听单选框radio改变事件（和layui中单选按钮改变事件）

若是只引用jquery的话，监听单选按钮改变事件如下： <input type="radio" name="sex" checked="checked" value=

短命女/ 2022年04月02日 06:53/ 1 赞/ 778 阅读

相关单选框radio改变事件

$(function () { $('input').on('ifChecked', function (event) {

布满荆棘的人生/ 2022年01月27日 10:39/ 0 赞/ 440 阅读

相关自定义样式的radio单选按钮

//自定义单选radio HTML 代码： <label class="defined-label"> <input class="def

曾经终败给现在/ 2021年11月17日 02:00/ 0 赞/ 421 阅读

相关改变radio默认样式

.html <div class="choose"> <p class="option"><label class="radio"><span cla

小鱼儿/ 2021年09月13日 15:58/ 0 赞/ 491 阅读

相关改变单选radio样式

<label class="checkbox-container"> <input type="radio" value="影视" name="in

偏执的太偏执、/ 2021年09月10日 07:02/ 0 赞/ 511 阅读

相关 HTML input radio 单选按钮

`< input>` 标签 type 属性值设置为 "radio"，即可创建一个单选按钮。既然是单选按钮，按钮之间通常互斥，同一时刻只能有一项处于选中状态。 ...

小灰灰/ 2020年05月15日 17:24/ 0 赞/ 1097 阅读