微信小程序:去掉button默认样式

这篇具有很好参考价值的文章主要介绍了微信小程序:去掉button默认样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

去除button默认样式:

/* 去掉背景色和内外边距 */
button {
    margin: 0;
    padding: 0;
    background-color: inherit;
    position: static;
}
button:after {
    content: none;
}
/* 去掉边框 */
button::after {
    border: none;
}

实例: 分享按钮

用户需要点击按钮分享当前页面,不过按钮样式需要自定义

<view class="btn-wrap">
<view class="btn-wrap__text">微信好友</view>
        <button open-type="share"
                class="btn-wrap__btn"></button>
</view>

通过绝对定位,让button在自定义元素之上,以便用户点击文章来源地址https://www.toymoban.com/news/detail-717652.html

.btn-wrap {
    position: relative;
   
  &__btn {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: inherit;
      padding: 0;
      margin: 0;
     
      &::after {
        border: none;
      }
    }
}

到了这里,关于微信小程序:去掉button默认样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 两个方法教你如何去除微信小程序button的边框

    最近做微信小程序的时候需要做一个弹层,上面有一个联系客服所以用了按钮button。uniapp的项目中button的边框在我给它的border设置为0后就不在了。但wepy中的边框加了none还是不行,后来看代码解决了这个问题,老规矩,废话不多说,直接上代码。 我的方法: 先给button加一个

    2024年02月12日
    浏览(53)
  • 微信小程序原生button组件使用并修改样式

     想使用原生button组件,但是想使用不同样式 注意type使用得type必须和修改时选择器样式(button[type=default])一样,才能对其修改样式,否则样式不会被修改 如果是多端适配,需要使用type为default再修改样式  

    2024年02月14日
    浏览(31)
  • 微信小程序去除默认滚动条展示

    一、微信小程序改版框架升级后,滚动条默认展示了。 在实际应用中效果不好,如果想默认隐藏掉,代码段如下: 设置成全局样式,展示即可。 更多:

    2024年02月03日
    浏览(23)
  • bug记录:微信小程序 给button使用all: initial重置样式

    场景:通过uniapp开发微信小程序 ,使用uview的u-popup弹窗,里面内嵌了一个原生button标签,因为微信小程序的button是有默认样式的,所以通过all: initial重置样式 。但是整个弹窗的点击事件都会被button上面的点击事件覆盖,也就是说点击弹窗任何一个地方,都会触发button的点击

    2024年02月11日
    浏览(27)
  • 前端使用css去除input框的默认样式

    2024年01月23日
    浏览(45)
  • 微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)

    今天第一次接触 vant 组件库。 ant官网地址 适用于Vue3 支持 Vue2 、 Vue3 、 微信小程序等 我在使用van-tabs组件时遇到了一个问题,如下图所示: 从图片上可以看到有个灰色的横向滚动条,一开始领导给我说这个问题,我反反复复都没有测出来,在微信开发者工具、IOS系统都没有

    2024年02月10日
    浏览(34)
  • 微信小程序 - 完美去除 <scroll-view> 滚动条,保证 100% 去掉隐藏苹果 ios 系统、安卓滚动条(解决 ios 苹果真机scroll-view无法隐藏滚动条)详细示例代码,保证可用

    关于微信小程序去掉 scroll-view 滚动条的教程中,全都是只能去掉安卓系统手机滚动条,而苹果手机则无法去掉。 本文 实现了在微信小程序中,强力去除 scroll-view 组件滚动条,保证去除苹果ios系统和安卓手机的滚动条, 您可以自由的将本文的去除代码应用到 “局部 / 全局”

    2024年02月11日
    浏览(31)
  • 微信小程序:修改按钮BUTTON尺寸

      微信小程序当中通过wxss来设置button的宽高值并不起效果,而size属性却只有两个合法值,当我们想要自定义大小时则: 在 标签中直接写 style即可: (当前为开发者模式无法进入会话,真机调试即可看到效果) 

    2024年02月11日
    浏览(41)
  • 微信小程序button组件怎么使用?

    其实学过前端的小伙伴们都知道button标签是什么。         是一个按钮组件         功能对比HTML种的button按钮丰富         通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等) 更多属性进入button | 微信开放文档 (qq.com)查看 属性

    2024年02月09日
    浏览(32)
  • uniapp和微信小程序去掉顶部标题

    今天刚开始做一个uniapp的项目,新建的项目带有默认顶部标题,要去掉。 找到配置文件pages.json,小程序在app.json 添加代码 完成。 最后这个项目会一直更新所遇到的问题,可能会比较慢,希望自己能够坚持完成。

    2024年02月13日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包