微信小程序 button 按钮所有默认的样式

  1. 小程序默认样式
     
     
    // 默认样式
    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:1;
    border-radius:5px ;
    -webkit-tap-highlight-color:transparent;
    overflow:hidden;
    color:#000000;
    background-color:#fff;}
    // 边框样式 button::after{ border: 0;}
    // 禁用时样式 button[disabled] { background-color: #fff; color: #666; } 
    // 点击时样式 .button-hover { color:rgba(0, 0, 0, 0.6); background-color:#fff;}
     
    2. 重置样式
    button{
       margin:0; padding:0; background-color:rgba(0,0,0,0); line-height:inherit; border-radius:0; border:none; display:flex; justify-content:center; align-items:center; } button::after{ border: none; }

    .button-hover {
    background-color:rgba(0, 0, 0, 0);
    }

     

猜你喜欢

转载自www.cnblogs.com/moneyss/p/11987366.html