關於小程序button控件上下邊框的顯示和隱藏問題


問題:

小程序的button控件上下有一條淡灰色的邊框,在空件上加上了樣式 border:(none/0); 都沒辦法讓button上下的的邊框隱藏:

代碼如下

<button class="con_listbox" hover-class="none"> .con_listbox{ width: 100%; height: 120rpx; padding: 0 32rpx; display: flex; justify-content: space-between; align-items: center; background: #fff; font-size: 28rpx; border:none; /*正常來說加上這個是可以去掉邊框的*/ }

 

效果圖如下:

后來發現button控件上有一個偽元素(::after),繼而發現這元素上有一個border屬性,默認為 border:1px solid rgba(0, 0, 0, 0.2),雖然顯示被划線,但功能在執行(鈎鈎打上了) 具體如圖:(調試的樣式列表往下拉最后)

所以問題解決了,border:none屬性不是沒效果,是被button::after 給覆蓋了,只要把button::after 的border 屬性去掉就可以了,具體代碼如下:

/*去掉按鈕邊框*/
 
button[class="con_listbox"]::after {
  border: 0;
} 

以上內容供學習總結分享,有什么不對的地方或可優化的地方,歡迎各位多多指教。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM