uniapp修改html样式,uniapp——小程序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: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;

}

复制代码

二、清除按钮的默认样式(小程序也适用)

button::after {

border: none;

}

复制代码

实现效果 ： 就是把它当做一个灵活的view/div 一样使用

css

.ser-son button::after {

border: none;

}

.ser-son button {

position: relative;

display: block;

margin-left: auto;

margin-right: auto;

padding-left: 0px;

padding-right: 0px;

box-sizing: border-box;

// font-size: 18px;

text-align: center;

text-decoration: none;

// line-height: 1;

line-height: 1.35;

// border-radius: 5px;

-webkit-tap-highlight-color: transparent;

overflow: hidden;

color: #000000;

background-color: #fff;

width: 100%;

height: 100%;

}

复制代码

html

联系客服

复制代码