uni问题：修改uni默认单选按钮样式

 

素材编辑 | 宋大狮

排版运营 | 小唐狮

ONE 问题描述

今天要和大家分享的是关于uni的问题，如何修改uniapp中默认单选按钮的样式。

需求：uniapp中默认的单选按钮选中后变为实心，中间显示对钩图标。但我们在做项目的时候，下面这种单选按钮的样式也是比较常见的。

TWO 代码实现

HTML部分：

      
            
               我已阅读并同意
               《服务协议》
               &
            《证照信息》
       
 

JS部分：

CSS部分：

  // 单选按钮样式
    .uni-radio-wrapper .uni-radio-input {
        background-color: transparent;
        border: 4rpx solid rgb(0, 122, 255);
        width: 26rpx;
        height: 26rpx;
    }
    // 隐藏对号
    uni-radio::before {
        display: none;
    }
    .uni-radio-wrapper .uni-radio-input.uni-radio-input-checked {
        background-color: rgba($color: #000000, $alpha: 0) !important;
        border: 4rpx solid rgb(170, 170, 0);
        position: relative;

        &::before {
            display: inline-block;
            content: '';
            width: 90%;
            height: 90%;
            position: absolute;
            left: 50%;
            top: 48%;
            transform: translate(-50%, -50%);
            background-color: rgb(0, 122, 255);
            border: none;
            border-radius: 50%;
        }
    }

THREE 问题总结

总结一：flex布局常用属性

  display:flex;  //将对象作为弹性伸缩盒子显示

  flex-direction:row;  //自左水平排列
  flex-direction:column;  //垂直方向排列

  flex-wrap:nowrap;  //项目不换行
  flex-wrap:wrap;  //换行 第一行在上方
  flex-wrap:reverse;  //换行 第一行在下方

  justify-content:flex-start;  //左对齐
  justify-content:flex-end;  //右对齐
  justify-content:center;  //居中对齐
  justify-content:space-between;  //两端对齐，盒子之间间隔相等
  justify-content:space-around;  //每个盒子两侧间隔相等

总结二：常用样式

  border-radius:8px;  //圆角半径
  text-indent:20px; // 首行缩进
  letter-spacing:1px;  //字间距
  vertical-align:middle;  //图片垂直居中
  z-index:99;  //提高元素层级
  :active  //元素被点击添加样式，样式在点击后消失
  :focus  //元素被点击添加样式，样式在点击后不消失

FOUR 集思广益

欢迎大家对本问题留言或私信指教，一起学习提高！

- END -

ABOUT 关于作者

• 宋大狮 | 轻轻松松工作，简简单单生活

• 小唐狮 | 广场舞大军中最靓的仔