The implementation method of removing the default border in the WeChat applet is as follows:
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;
}
This is the default css style that comes with button
Normally, we can use the following code to remove the button
button{
border:none;
}
or
button{
outline: none;
}
But sometimes it does not work. At this time, we can use the ::after pseudo-class selector, because the border style of the button is implemented through the ::after method. If the border is defined on the button, two border lines will appear, so we can use the ::after method to override the default value.
button::after {
border: none;
}
This way, you can get the default style of the mini program button, but it is equivalent to a text style. There are still many button default styles that have not been removed. This needs to be set according to personal needs. I will not explain it here. If you encounter related situations in the future, please continue to update. If you need to customize, you can do it by a class selector on the button.
Summarize
The above is the example code for removing the default border in the WeChat mini program introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!