1.改变radio大小
/* 单选钮样式 */
radio {
transform:scale(0.5);
}
2、改变switch大小
.wx-switch-input{width:42px !important;height:22px !important;}
.wx-switch-input::before{width:40px !important;height: 20px !important;}
.wx-switch-input::after{width: 18px !important;height: 18px !important;}
3、改变滚动条默认样式
::-webkit-scrollbar{
width: 0px;
height:0px;
}
4、去除button默认样式
1、使用::after 伪类选择器,因为button的边框样式是通过::after方式实现的,如果在button上定义边框就会出现两条边框线,所以我们可以使用::after的方式去覆盖默认值。
button::after {
border: none;
}
2、还需要在将按钮背景色设置为白色,因为按钮默认背景色是灰色的。
button {
background-color: #fff;
}
3、去掉/修改默认的圆角:
button {
border-radius:0;
}
button {
border-radius: 98rpx;
}
例1:
<button class='btn1' open-type='openSetting'>
<image class='btnImg' src='../../images/wechat.png'></image>
<view>确定</view>
</button>
.btn1 {
width: 80%;
margin-top: 20rpx;
background-color: burlywood;
color: white;
border-radius: 98rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.btnImg {
margin-right: 8rpx;
width: 46rpx;
height: 46rpx;
}
.btn1::after {
border-radius: 98rpx;
border: 0;
}
效果图:
例2:
<button class='btn1' open-type='contact'>
<image class='btnImg' src='../../images/客服.png'></image>
<view>联系客服</view>
</button>
<button class='btn2' open-type='openSetting'>
<image class='btnImg' src='../../images/设置.png'></image>
<view>授权设置</view>
</button>
.btn1{
width: 200rpx;
height: 200rpx;
margin-top: 20rpx;
background-color: white;
color: #999999;
border-radius: 0rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 30rpx;
}
.btnImg {
width: 50rpx;
height: 50rpx;
}
.btn1::after {
border: 0;
}
.btn2 {
width: 200rpx;
height: 200rpx;
margin-top: 20rpx;
background-color: white;
color: #999999;
border-radius: 0rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 30rpx;
}
.btn2::after {
border: 0;
}