【MP】button控件的边框隐藏

801 阅读1分钟

原生微信小程序开发过程中,遇到一个button边框不能隐藏的问题。

button控件有一条淡灰色的边框,在控件上了添加了隐藏边框的样式依然无法使button边框隐藏

/* 客服中心button样式 */
.item-text-CSC{
	background:transparent;
    padding:0;
    margin:0;
    /* 下面三条隐藏边框的样式都无效 */
    /* boder:0; */
    /* boder:none; */
    /* border:transparent; */
}

找了点资料,原来微信小程序中button的边框是加在::after上的,在button这个伪元素中默认有一条这样的样式

border:1px solid rgba(0,0,0,0.2);

找到原因那就好办了!

/* 客服中心button样式 */
.item-text-CSC{
	background:transparent;
    padding:0;
    margin:0;
}

.item-text-CSC::after{
	/* 下面三条隐藏边框的样式都能生效 */
    /* boder:0; */
    /* boder:none; */
    border:transparent;
}

成功实现了button控件的边框隐藏

通过这个案例自己也明白一个道理:一段代码的价值不在于它自身的意义,而在于这段代码它在哪里。看清自己的能力的同时,也要明白不同的时间、场合下有着不同的处理方式,见机行事。