当前位置: 首页 > news >正文

【uniapp】样式合集

1、修改uni-data-checkbox多选框的样式为单选框的样式

 

我原先是用的单选,但是单选并不支持选中后,再次点击取消选中;所以我改成了多选,然后改变多选样式,让他看起来像单选 

 在所在使用的页面上修改样式即可

<uni-data-checkbox multiple selectedColor='#2979ff' selectedTextColor="#000" v-model="agree":localdata="agreedata"><label><checkbox /><view>我已阅读并同意<text class="col-g" @click="handleXI">《用户协议》</text><text class="col-g" @click="handleYX">《隐私协议》</text></view></label></uni-data-checkbox>
<style lang="scss">//修改多选框的样式为单选样式.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner .checkbox__inner-icon {opacity: 1;background-color: #2979ff !important;}.uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon {width: 8px !important;height: 8px !important;border-radius: 10px !important;top: 3px !important;left: 3px !important;height: 8px;width: 4px;border: 0px solid #2979ff !important;}.uni-data-checklist .checklist-group .checklist-box .checkbox__inner {border-radius: 8px !important;display: flex;flex-shrink: 0;box-sizing: border-box;justify-content: center;align-items: center;position: relative;width: 16px;height: 16px;border: 1px solid #DCDFE6;border-radius: 16px;background-color: #fff !important;z-index: 1;}
</style>

2、修改checkbox的样式

 

<checkbox-group><label style="display: flex;"><checkbox value="agree" class="checkbox" /><view>我已阅读并同意<text class="col-g" @click="handleYH">《用户协议》</text>及<text class="col-g" @click="handleYS">《隐私协议》</text></view></label></checkbox-group>

 样式必须得写在app.vue中

.login_container {//自定义checkbox的样式( 元素使用的时候就是使用类名:checkbox )checkbox.checkbox .wx-checkbox-input,checkbox.checkbox .uni-checkbox-input {border-radius: 8px !important;display: flex;flex-shrink: 0;box-sizing: border-box;justify-content: center;align-items: center;position: relative;width: 16px;height: 16px;border: 1px solid #DCDFE6;border-radius: 16px;background-color: #fff !important;z-index: 1;}// 选中后的 对勾样式 checkbox.checkbox .uni-checkbox-input-checked::before,checkbox.checkbox .wx-checkbox-input-checked::before {width: 8px;height: 8px;border-radius: 10px !important;line-height: 20px;text-align: center;font-size: 18px;color: #fff;background: #2979ff;transform: translate(-70%, -50%) scale(1);-webkit-transform: translate(-70%, -50%) scale(1);position: absolute;top: 7px !important;left: 9px !important;border: 0px solid #2979ff !important;}}

http://www.lryc.cn/news/108073.html

相关文章:

  • 【Spring框架】SpringBoot统一功能处理
  • 51单片机学习--按键控制流水灯模式定时器时钟
  • Django教程_编程入门自学教程_菜鸟教程-免费教程分享
  • VGG卷积神经网络-笔记
  • Python爬虫如何实现IP代理池搭建
  • 单例模式:保证一个类只有一个实例
  • 【新版系统架构补充】-七层模型
  • 第2章 C语言概述
  • vscode vue3开发常用插件(附Prettier格式化配置)
  • 【微信小程序】van-uploader实现文件上传
  • 人工智能在计算机视觉中的应用与挑战
  • 以太网接口指示灯状态分析和电路设计
  • Redis的基础
  • LeetCode 626. 换座位
  • 华为、阿里巴巴、字节跳动 100+ Python 面试问题总结(六)
  • hash 模式和 history 模式的实现原理
  • 并发编程Part 2
  • springboot异步多线程的实现
  • 测试相关基础概念与常见开发模型
  • MySQL安装详细教程!!!
  • 前端下载文化部几种方法(excel,zip,html,markdown、图片等等)和导出 zip 压缩包
  • 铠甲网络面试(部分)
  • elasticsearch 将时间类型为时间戳保存格式的时间字段格式化返回
  • 淘宝商品列表怎么通过接口形式导出?
  • TWS真无线蓝牙耳机哪家好?六款口碑好的TWS真无线蓝牙耳机分享
  • 解决Win11右键菜单问题
  • 开源元数据管理平台Datahub最新版本0.10.5——安装部署手册(附离线安装包)
  • 归并排序——“数据结构与算法”
  • C语言笔试题训练【第一天】
  • 计算语言模型计算每秒钟生成的token数量it/s