uniapp button按钮去掉默认样式

有时候要使用uniapp官方提供的客服和分享功能,需要用到button按钮,里面属性open-type正好可以实现这些功能,不得不使用这种方式。

但是这种方式,uniapp官方默认为button按钮加了些样式,自己写的样式也无法进行完全覆盖,所以今天分享一个覆盖官方button按钮的样式

<button type="primary" open-type="contact">打开客服</button>

button::after {
            border: none;
        }

        button {
            position: relative;
            display: block;
            margin-left: auto;
            margin-right: auto;
            padding-left: 0px;
            padding-right: 0px;
            box-sizing: border-box;
            text-align: center;
            text-decoration: none;
            line-height: 1.35;
            -webkit-tap-highlight-color: transparent;
            overflow: hidden;
            color: #000;
            font-size: 32rpx;
            background-color: #fff;
            width: 100%;
            height: 100%;
        }

  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,下面是一些 uni-appcss 样式模板。 1. 基本布局模板 ```css /* 定义页面最外层元素 */ .page { /* 定义页面的默认背景颜色 */ background-color: #ffffff; /* 定义页面的最小高度 */ min-height: 100%; /* 定义页面内容的边距 */ padding: 20px; } /* 定义一个块元素 */ .block { /* 定义块元素的背景颜色 */ background-color: #f5f5f5; /* 定义块元素的圆角边框 */ border-radius: 10px; /* 定义块元素的内边距 */ padding: 20px; /* 定义块元素的外边距 */ margin: 20px; } /* 定义一个行元素 */ .row { /* 定义行元素的水平排列方式 */ display: flex; /* 定义行元素的子元素在水平方向的对齐方式 */ justify-content: space-between; } /* 定义一个列元素 */ .col { /* 定义列元素的垂直排列方式 */ display: flex; /* 定义列元素的子元素在垂直方向的对齐方式 */ align-items: center; /* 定义列元素的宽度 */ width: 50%; } ``` 2. 文本样式模板 ```css /* 定义一段文本的默认字体 */ .text { font-size: 14px; color: #333333; } /* 定义一段标题文本的样式 */ .text-title { font-size: 18px; font-weight: bold; color: #333333; margin-bottom: 10px; } ### 回答2: 以下是一些常见的Uniapp CSS样式模板: 1. 文本样式模板: ``` .text-primary { color: #007bff; } .text-success { color: #28a745; } .text-danger { color: #dc3545; } .text-warning { color: #ffc107; } .text-muted { color: #6c757d; } ``` 2. 按钮样式模板: ``` .btn { display: inline-block; padding: .5rem 1rem; font-size: 1rem; border-radius: .25rem; text-align: center; cursor: pointer; background-color: #007bff; color: #fff; transition: background-color .3s ease-in-out; } .btn:hover { background-color: #0069d9; } .btn:active { background-color: #0056b3; } .btn-primary { background-color: #007bff; border-color: #007bff; } .btn-success { background-color: #28a745; border-color: #28a745; } .btn-danger { background-color: #dc3545; border-color: #dc3545; } .btn-warning { background-color: #ffc107; border-color: #ffc107; } .btn-outline { background-color: transparent; color: #007bff; border-width: 1px; border-color: #007bff; } ``` 3. 卡片样式模板: ``` .card { background-color: #fff; border-radius: .25rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); padding: 1rem; margin-bottom: 1rem; } .card-title { font-size: 1.25rem; font-weight: bold; margin-bottom: .75rem; } .card-text { margin-bottom: .75rem; } .card-footer { padding: .5rem 0; text-align: right; } ``` 以上是一些Uniapp常用的CSS样式模板供参考,根据具体需求可以进行修改和扩展。不同的样式模板可以根据需求组合使用,以实现所需的效果。 ### 回答3: 以下是一些常见的uni-app CSS样式模板: 1. 文字样式模板: ``` /* 标题样式 */ .title { font-size: 18px; font-weight: bold; color: #333333; } /* 普通段落样式 */ .paragraph { font-size: 14px; color: #666666; line-height: 1.5; } /* 链接样式 */ .link { color: #0088cc; text-decoration: none; } /* 加粗样式 */ .bold { font-weight: bold; } ``` 2. 按钮样式模板: ``` /* 基本按钮 */ .button { display: inline-block; padding: 10px 20px; background-color: #0088cc; color: #ffffff; text-align: center; border-radius: 5px; } /* 悬浮效果 */ .button:hover { background-color: #006699; cursor: pointer; } /* 禁用按钮 */ .button.disabled { background-color: #999999; cursor: not-allowed; } ``` 3. 表格样式模板: ``` /* 基本表格样式 */ .table { width: 100%; border-collapse: collapse; } /* 表头样式 */ .table th { padding: 8px; background-color: #0088cc; color: #ffffff; } /* 表格行样式 */ .table tr { background-color: #f5f5f5; } /* 奇数行样式 */ .table tr:nth-child(odd) { background-color: #ffffff; } /* 表格单元格样式 */ .table td { padding: 8px; text-align: center; } ``` 这只是一些基本的CSS样式模板,你可以根据自己的需求进行修改和扩展。同时,你还可以通过阅读uni-app的官方文档以及css教程来了解更多相关的样式模板和使用方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值