How to clear the default styles of buttons and scroll bars in mini programs (code)-Mini Program Development-php.cn

How to clear the default styles of buttons and scroll bars in mini programs (code)

不言

Release： 2018-08-21 16:59:19

Original

3505 people have browsed it

The content of this article is about how to clear the default styles of buttons and scroll bars in mini programs (code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

To achieve the effect shown in the figure below, use four buttons to achieve it:

## When writing styles, the buttons cannot always be cleared. Rounded corners and borders, love between gods and demons!

In fact, we can check the default style of the button to solve it; we create a button, check the style, and we find the problem

It turns out that the button of the mini program comes with border-radius and border Attributes such as these are not set directly to the button, but are set using button::after. Therefore, to clear these two default styles, you cannot directly set the button style. You must clear these styles in button::after. , but the css statement to clear the style is best written at the beginning of the wxss file. Writing it at the end of wxss will clear the related styles you set for the button. The code is as follows:

button::after{

border-radius: 0;

border: 0;

}

Copy after login

Another pitfall is that setting the border-left value in button::after can add a left border to each button. If the border-right value is set, this border line will only It will be displayed between points and account balance.

Clear the scroll bar of scroll-view

Sometimes we don’t need the wide and ugly scroll bar. In fact, it is very easy to clear it. Add the following to the wxss file The code is enough. Again, we need to write it at the beginning of the wxss file.

::-webkit-scrollbar{

  width: 0;

  height: 0;

}

Copy after login

Related recommendations:

Introduction to form submission and verification in WeChat applet and the usage of regular expressions (with code)

Introduction to the configuration method of json configuration in WeChat applet (with code)

The above is the detailed content of How to clear the default styles of buttons and scroll bars in mini programs (code). For more information, please follow other related articles on the PHP Chinese website!