改变radio默认样式

小鱼儿 2021-09-13 15:58 379阅读 0赞

## .html ##

<div class="choose">
      <p class="option"><label class="radio"><span class="con">A 蛇</span><input type="radio" name="radio" value="1" v-model="picked"><i></i></label></p>
      <p class="option"><label class="radio"><span class="con">B 大树</span><input type="radio" value="2" name="radio" v-model="picked"><i></i></label></p>
      <p class="option"><label class="radio"><span class="con">C 老虎</span><input type="radio" value="3" name="radio" v-model="picked"><i></i></label></p>
    </div>

## .css ##

.choose { 
    	position: relative;
    	} 
    .choose .radio { 
    	position: relative;
    	display: inline-block;
    	padding-left: 25px;
    	cursor: pointer;		
    	}
    .choose .radio input { 
    	position: absolute;
    	left: -9999px;
    	
    }	 
    .choose .radio i { 
    	display: block;
    	position: absolute;
    	top: 3px;
    	left: 0;
    	width: 20px;
    	height: 20px;
    	outline: 0;
    	border: 2px solid lightgray;
    	background: #ffffff;
    	border-radius: 50%;
    	transition: border-color .3s;
    	-webkit-transition: border-color .3s;
    } 
    .choose .radio input + i:after { 
    	position: absolute;
    	content: '';
    	top: 4px;
    	left: 4px;
    	width: 12px;
    	height: 12px;
    	border-radius: 50%;
    	background-color: #4CD764;
    	opacity: 0;
    	transition: opacity .1s;
    	-webkit-transition: opacity .1s;
    }	 
    .choose .radio input:checked + i:after { 
    	opacity: 1;
    }

效果图如下：  
![在这里插入图片描述][20200429112205578.png]

[20200429112205578.png]: /images/20210913/d6481738dc59442bb59d298be01e826f.png

发表评论取消回复

表情：

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

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

相关阅读

相关小程序修改默认的radio样式

1、wxml： <radio-group class="radio-group" bindchange="radioChange"> <vie

不念不忘少年蓝@/ 2022年11月22日 10:13/ 0 赞/ 171 阅读

相关 uniapp改变radio大小

半年前使用uniapp+ColorUI+安卓写了一款app，最近在进行一些优化和修改，顺便记录一下遇到的一些小问题，遇到的一些可以记录下来的优化点，其实uniapp用来做一些比

- 日理万妓/ 2022年11月04日 01:38/ 0 赞/ 241 阅读

相关 css修改radio、checkbox默认样式

> 为radio类型的input标签添加类名aui-radio，如下 ![0b22aa3cc73441feb246bb914f2aa713.png][] 然后引入

本是古典何须时尚/ 2022年09月16日 01:27/ 0 赞/ 218 阅读

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

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

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

相关如何改变默认的checkbox样式

我们在项目中使用到input标签的checkbox的时候，它的默认样式通常无法满足项目需求，主要是它显得有点小而丑。将它根据项目的需求进行改造就是我们要做的事情了，下面讲两种

今天药忘吃喽~/ 2022年06月13日 13:28/ 0 赞/ 640 阅读

相关 Android系统默认样式颜色改变

Android默认控件主题样式颜色值设置前段时间，有个需求要改ProgressBar显示的颜色，刚开始我以为这个控件本身有这个属性，但是找了很久没有，其他的实现方

刺骨的言语ヽ痛彻心扉/ 2022年05月29日 02:14/ 0 赞/ 687 阅读

相关改变input tpye 属性radio css 样式！！！

// html部分 <div class="Report_for_right"> <input type="radio" name="Report_

灰太狼/ 2022年01月10日 05:25/ 0 赞/ 224 阅读

相关改变checkbox默认样式

.html <div class='checkbox option'> <input type='checkbox' id='checkbox

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

相关改变radio默认样式

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

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

相关改变单选radio样式

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

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