如何自定義mui按鈕被按下時的顏色
阿新 • • 發佈：2019-02-08
mui的按鈕被按下時的顏色主要是通過修改樣式來實現的，即未被按下時是一種顏色，被按下時是另一種顏色。
下圖中紅框處的程式碼就是按鈕被按下的樣式。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet" /> <script type="text/javascript" charset="utf-8"> mui.init(); </script> <style type="text/css"> .mui-btn { padding: 10px; width: 100%; margin-top: 30px; } /*按鈕未被按下時的樣式*/ .mui-btn-primary { border: 1px solid #0383ad;/*按鈕的邊框線顏色*/ background: #0383ad;/*按鈕的背景色*/ } /*按鈕被按下時的樣式*/ .mui-btn-primary:active { color: #fff;/*按鈕上文字的顏色*/ border: 1px solid #046d90;/*按鈕被按下時邊框線的顏色*/ background-color: #046d90 !important;/*按鈕被按下時的顏色*/ } </style> </head> <body> <button class="mui-btn mui-btn-primary mui-btn-primary">登入</button> </body> </html>
附示例程式碼連結：連結
如果本文對您有所幫助，麻煩點選一下左側的點贊按鈕，謝謝！