微信小程序 - 修改 button 样式边框和背景色

最新推荐文章于 2025-03-24 19:00:53 发布

yunsong233

最新推荐文章于 2025-03-24 19:00:53 发布

阅读量7.9k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/yunsong233/article/details/127201271

版权

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用WXML和CSS定制微信小程序中的按钮样式，包括去除按钮边框、设置透明按钮以及修改禁用状态下的按钮颜色等技巧。

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

wxml代码：

   <view>
      <button class="publish" disabled="{{disabled}}" bindtap='submit'>发表</button>
    </view>

css代码：

/* 去掉按钮边框方法一 */
.publish::after {
  border: none;
}
 
/* 去掉按钮边框方法二 */
.publish::after {
  border: 0;
}

设置透明按钮：

.publish{ 
width:100%;
margin: 0 auto;
display:block;
color: #CDB03B;
background: transparent;   /*设置背景颜色一致*/
border-color: transparent; /*设置边框颜色一致*/
/* background-color: rgba(255,255,255,0); */
}
.publish::after{   
   border: none;    /*设置边框取消*/
 }

button 设置 disabled 之后背景颜色和字体颜色的值都是默认的 ,需要修改 disabled 背景颜色和字体颜色。

/* 修改默认背景色 */
.publish[disabled][type="default"], wx-button[disabled]:not([type]) {
  color: #7f8389;
  background-color: white;
  border-color: white;
}