微信小程序修改button样式

Posted 2022-12-05 xiaoqiang_0719

今天碰见个感觉很奇怪的问题修改了button的很多样式就是得不到自己想要的效果

比如 我想他能够跟普通text一样显示文字，但是button有自己的border自己的背景并且默认还是文字居中显示，调了半天都没有试出来，最重要的是在小程序官方文档的组件中也没有提供button的默认css样式，从显示上能断定是使用了文字居中、border边框等，所以很难去通过尝试修改而达到目的

这里提供一下button默认的css样式，只有知道了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-highlight-color:transparent;
  overflow:hidden;
  color:#000000;
  background-color:#F8F8F8;

通过上面的css样式就能够轻松的解决button布局问题，

例如：

1、文字在button内居中问题

我们设置 text-align: left; 然后设置padding-left:0px; 这样文字就会在左边显示

2、默认 边框border问题

我们可以使用：

button::after
  border: none;

因为button的边框样式是通过::after方式实现的，如果在button上定义边框就会出现两条边框线，所以我们可以使用::after的方式去覆盖默认值。

还需要去掉圆角以及修改背景颜色

background-color: #fff;

border-radius: 0;