自定义修改input=radio的样式(选中+禁用)

最新推荐文章于 2024-10-09 10:13:28 发布

原创最新推荐文章于 2024-10-09 10:13:28 发布 · 5.5k 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何在移动端开发中自定义input=radio的样式，通过隐藏原始的radio按钮并使用label元素来实现符合UI设计要求的样式。

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

自定义修改input=radio的样式

前言
实现

前言

鉴于在移动端开发中用到的移动端的组件库内没有符合UI设计要求的radio样式，只能使用最原始的input来造成符合需求的框

实现

样式与原始的差不多，只是选中的颜色改成绿色

		<input
        id="inputChoice1"
         v-model="advice"
         class="select"
         type="radio"
         :disabled="!isLeader"
         name="leaderadvice"
         value="choice1"
       />
       <label for="inputChoice1"></label>
       <span>choice1</span>
       <input
         id="inputChoice2"
         v-model="advice"
         class="select"
         type="radio"
         :disabled="!isLeader"
         name="leaderadvice"
         value="choice2"
       />
       <label for="inputChoice2"></label>
       <span>choice2</span>

选中时：
在这里插入图片描述
禁用时

样式的修改主要还是借助各种选择期，以及将选中框的样式寄托在label上

样式代码如下

//将input的圆框隐藏
 input[type='radio'] {
    width: 0.32rem;
    height: 0.32rem;
    display: none;
  }
//定位label到圆框的位置，并修改样式为圆框
  label {
    position: relative;
    top: 0.1rem;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    border: 1px solid #999;//默认为边框
  }

  /*设置选中的radio的样式*/
  /* + 是兄弟选择器,获取选中后的label元素*/
  input:checked + label {
    background: url('../../../assets/images/mobile/icon-check.png'); //直接借助背景图片
    border: none;
  }
   /*设置禁用的radio的样式*/
  input:checked[disabled] + label {
    background: url('../../../assets/images/mobile/icon-check-disabled.png');
    border: none;
  }