微信小程序开发——button去掉默认样式

番薯大佬

已于 2022-02-13 02:24:51 修改

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序学习文章标签：微信小程序 javascript 前端

于 2022-02-13 01:58:41 首次发布

本文链接：https://blog.csdn.net/potato512/article/details/122904835

本文介绍了如何在微信小程序中去除button组件的默认样式，通过代码示例展示了在设置前后的方法，包括在样式设置代码段中删除默认样式，以实现完全自定义的按钮样式。

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

1、设置前
button默认样式
2、设置后
2.1 样式设置代码

button去掉默认样式

wxml代码

<button class="buttonstyle " open-type="feedback">反馈建议</button>
<button class="buttonstyle " open

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

番薯大佬

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

【微信小程序】10分钟学会微信小程序textarea多行输入框组件，你还在等什么？

java专栏

11-27

1362

通过以上详细的介绍，相信你已经对微信小程序中的textarea多行输入框组件有了全面的了解。textarea组件虽然看似简单，但功能强大，能够帮助开发者实现丰富的输入功能和良好的用户体验。只要你掌握了这些基础知识和技巧，就能轻松应对各种开发任务。希望你能轻松掌握这些技能，成为微信小程序开发的高手！🌟🚀下次见，祝你开发愉快！👋🎉。

微信小程序开发

corn6的博客

08-15

633

注册 https://mp.weixin.qq.com/ 上面这个网址，是注册小程序用的小程序语法特点小程序适配方案创建小程序点开微信开发者工具，创建一个小程序注意那个AppId，可以在最上面那个网址里面拿到工具介绍左上角个人中心，扫码登录模拟器跟编辑器对应这两块区域这是调试器点击编译，就会重新跑一遍程序，点击预览，就会生成一个二维码，然后可以真机体验 ...

参与评论您还未登录，请先登录后发表或查看评论

微信小程序中button去除默认的边框实例代码

11-30

微信小程序中button去除默认的边框的实现方法如下所示： button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; box-sizing:border-box; font-size:18px; text-align:center; text-decoration:none; line-height:2.55555556; border-radius:5px; -webkit-tap-hi

清除微信小程序button的默认样式

热门推荐

Trees__的博客

04-22

1万+

清除微信小程序button的默认样式文章目录清除微信小程序button的默认样式总结最近在微信小程序的开发过程中，经常的使用button按钮，但是我们要怎么样去除它们的默认样式呢? 一、去除button的边线：因为button的边框样式是通过::after方式实现的，所以我们在这里要使用::after 伪类选择器对默认样式进行覆盖. wxml页面 <view> <button>我是按钮</button> </view> wxss页面 button

微信小程序、html、css清除＜button＞标签的默认样式

weixin_42934172的博客

02-15

2193

【代码】CSS中清除＜button＞的默认样式。

微信小程序去除原生button样式的问题！

weixin_47588909的博客

04-26

1312

这里要注意：display：inline-block;必须加上，否则原生按钮的大小没办法改变。还是存在一些问题：文字大小的问题！大小设置真机上和工具上不太一样！

微信小程序去除button默认样式

weixin_44131298的博客

04-21

972

【代码】微信小程序去除button默认样式。

微信小程序 button样式去掉

01-01

### 如何自定义微信小程序 Button 样式并去掉默认样式在微信小程序开发中，`<button>` 组件具有默认的样式，这可能不符合设计需求。为了去除这些默认样式并应用自定义样式，可以采用多种方法。 #### 方法一：使用...

微信小程序+echart

CheryW的博客

06-14

2155

微信小程序加载echart地图

清除微信小程序默认button样式

qq_45256497的博客

05-27

528

【代码】清除微信小程序默认button样式。

微信小程序开发去除button默认样式

chenzhezhong的博客

11-29

1150

去除button默认样式

微信小程序分享按钮默认样式去除

最新发布

haotian125j的博客

03-24

468

* 水平居中 *//* 重置行高 */display: flex;/* 保持 flex 布局 */align-items: center;/* 垂直居中 */display: none;/* 隐藏默认的点击效果 */background: none;/* 清除背景 */border: none;/* 清除边框 */padding: 0;/* 清除内边距 */margin: 0;/* 清除外边距 *//* 清除按钮的点击效果 *//* 清除按钮默认样式 */

微信小程序完全去除button默认样式

weixin_46449470的博客

04-29

1408

button{ background-color:rgb(247, 247, 247); //可根据自己的背景颜色自行设置 border-radius: 0rpx; padding:0rpx; margin:0rpx; display: inline-block; line-height: 1; } button::after{ /*button的边框样式是通过::after方式实现的*/ border:none; } .button-hover{ /*点击后样式*/ color:#000; back.

微信小程序: Button默认样式去除

酷伊奥

07-19

6025

在微信小程序的开发过程中，小伙伴们都会经常的使用button按钮，但是我们要怎么样去除它们的默认样式呢。因为最近有了解到这个，所以就跟大家伙说一下。一、去除button的边线：因为button的边框样式是通过::after方式实现的，所以我们在这里要使用::after伪类选择器。如果在button上定义边框就会出现两条边框线的话，我们就可以使用::after的方式去覆盖默认值。 1、wxml页面 <view> <button>我是按钮</button>...

微信小程序去除默认button样式

CSDN for recording problems

01-19

515

样式文件中添加下面 button::after { border: none; } button { background-color: transparent; padding-left: 0; padding-right: 0; line-height:inherit; } button { border-radius:0; }

微信小程序如何默认按钮button去掉默认样式

于忠会的博客

12-11

1375

button type="primary" plain="true">按钮修改button按钮disabled为true时会出现灰色字体浅灰色背景的样式。可以加下以下样式去掉带有虚边的样式。修改button按钮点击时样式。

清除button的所有样式

qq_49552046的博客

10-21

2887

在开发小程序时会有调起微信客服的功能,这是必须使用button里的一个open-type="contact"的属性,但是有些调起的按钮样式比较复杂,这时候就需要自定义按钮样式,首先我们要清除button自带的样式,下面直接附上代码。

小程序去除button默认样式

leng0920的博客

03-20

1万+

/* 去除button默认样式 */ button::after { border: none; } button { background-color: transparent; padding-left: 0; padding-right: 0; line-height:inherit; } button { border-radius:0; } ...

uniapp button按钮去掉默认样式

m0_53428367的博客

01-10

3374

uniapp button按钮去掉默认样式