微信小程序中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;}
這是button默認自帶的css樣式
正常來說,去除button我們使用如下代碼即可
button{ border:none;}或者button{ outline: none;}
但是有時候卻不起作用,這個時候我們可以使用::after 偽類選擇器,因為button的邊框樣式是通過::after方式實現的,如果在button上定義邊框就會出現兩條邊框線,所以我們可以使用::after的方式去覆蓋默認值。
button::after { border: none;}
這樣就可以搞定小程序按鈕默認樣式了,只是相當于一個文本的樣式,還是有很多button的默認樣式沒有去除的,這個需要根據個人需求來設置的,這里不過多說明,后續有再遇到相關情況,再續更,如果需要自定義可以在按鈕上一個類選擇器就可以搞定。
總結
以上所述是小編給大家介紹的微信小程序中button去除默認的邊框實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
新聞熱點
疑難解答