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

最新推荐文章于 2022-01-26 11:18:31 发布

black_cat_T

最新推荐文章于 2022-01-26 11:18:31 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习之路文章标签： input radio css vue

本文链接：https://blog.youkuaiyun.com/qq_40717869/article/details/80966237

vue学习之路专栏收录该内容

4 篇文章

订阅专栏

为解决移动端可选框input[type=radio]样式不统一的问题，特别是在iOS平台上的显示效果不佳的情况，本文介绍了一种自定义样式的方法，并提供了具体的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可选框input[type="radio"] 在移动端的样式不一致，尤其在ios的样式别的惨目忍睹，所以就自己自定义一下，查了网上好多资源，不尽人意，都是一套代码反复发，所以自己写了一个～

写完是长这个样子滴

<span class="sex">
    <label>
        <img src="static/img/icon_ddown.png" v-show="this.Sex == 1"> //选中状态图片地址
        <img src="static/img/icon_weixz.png" v-else> //
	<input type="radio" name="sex" value="1" @click="sexChoose(1)">女
    </label>
</span>
<span class="sex">
    <label>
        <img src="static/img/icon_ddown.png" v-show="this.Sex == 0"> //选中状态图片地址
        <img src="static/img/icon_weixz.png" v-show="this.Sex == 1">
        <input type="radio" name="sex" value="0" @click="sexChoose(0)">男
    </label>
</span>

        .sex {
		float: left;
		width: 40%;
		height: 0.5rem;
		text-align: left;
		box-sizing: border-box;
		padding-left: 0.3rem;
	}
	.sex label{
		position: relative;
		padding-left: 0.26rem;
	}
	.sex input {
		width: 0.15rem; height: 0.15rem;
		position: absolute; top: 0.03rem;
		left: 0;
		margin-right: 0.1rem;
		background: initial;
		opacity: 0;
	}
	.sex img {
		width: 0.15rem; height: 0.15rem;
		position: absolute; top: 0.03rem;
		left: 0;
		margin-right: 0.1rem;
		background: initial;
	}

export default{
data (){
    return {
	Sex: 1,
    }
},
methods: {
    /**
     * [sexChoose 性别选择]
     * @param  {[type]} val [description]
     * @return {[type]}     [description]
    */
    sexChoose(val) {
        this.Sex = val;
    },
}
}

这两个就是我用的选中图片～～