Maison > Applet WeChat > Développement de mini-programmes > Comment effacer les styles par défaut des boutons et des barres de défilement dans les mini-programmes (code)

Comment effacer les styles par défaut des boutons et des barres de défilement dans les mini-programmes (code)

不言
Libérer: 2018-08-21 16:59:19
original
3537 Les gens l'ont consulté

Le contenu de cet article explique comment effacer les styles par défaut des boutons et des barres de défilement dans les mini-programmes (code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

obtient l'effet illustré dans la figure ci-dessous, en utilisant quatre boutons :

Lors de l'écriture de styles, les boutons ne peuvent pas toujours être effacés. et frontières, l'amour entre dieux et démons !

En fait, on peut vérifier le style par défaut du bouton pour le résoudre ; on crée un bouton, on vérifie le style, et on trouve le problème

Il s'avère que le bouton du Le mini programme est livré avec les attributs border-radius et border tels que ceux-ci ne sont pas définis directement sur le bouton, mais sont définis à l'aide de bouton :: after. Par conséquent, pour effacer ces deux styles par défaut, vous ne pouvez pas définir directement le style du bouton. Vous devez effacer. ces styles dans button::after , mais il est préférable d'écrire l'instruction CSS pour effacer le style au début du fichier wxss. L'écrire à la fin de wxss effacera les styles associés que vous avez définis pour le bouton. Le code est le suivant :

button::after{

border-radius: 0;

border: 0;

}
Copier après la connexion

Un autre piège est que la définition de la valeur de bordure gauche dans bouton :: après peut ajouter une bordure gauche à chaque bouton. Si la valeur de bordure droite est définie, cette bordure. ligne La ligne n'apparaîtra qu'entre les points et le solde du compte.

Effacer la barre de défilement de la vue de défilement

Parfois, nous n'avons pas besoin de la barre de défilement large et laide. En fait, il est très facile de l'effacer. Ajoutez ce qui suit au fichier wxss. Le code suffit. Encore une fois, nous devons l'écrire au début du fichier wxss.

::-webkit-scrollbar{

  width: 0;

  height: 0;

}
Copier après la connexion

Recommandations associées :

Introduction à la soumission et à la vérification de formulaires et à l'utilisation d'expressions régulières dans les mini-programmes WeChat (avec code)

Introduction à la méthode de configuration de la configuration json dans le mini programme WeChat (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal