微信小程序修改button样式

今天碰见个感觉很奇怪的问题修改了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;

 

 

 

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页