⼩程序常⽤的⾃带组件样式修改1.按钮样式的修改
/* 修改button按钮default样式  */
button{
color: #fff;
font-size: 16px;
/* background-color:#1296DB;  */
background-color: rgba(18, 150, 219, 0.6)
}
button::after{
border: none;
}
1-2，按钮如果不是默认，⽤别的。可以点击查看都有什么样式属性，重写
button{
xxxxxxx
}
button[plain]{
/* border: 1px solid #ddd;
color: red; */
}
2.轮播图⾥的滑块改变
<swiper class="swiper-box" indicator-dots="{{ indicatordots }}" autoplay="{{ autoplay }}">
<block wx:for="{{ swiperItem }}">
<swiper-item>
<navigator url="{{ item.linkUrl }}">
<image class="slide-image" src="{{ item.imgUrl }}"></image>
</navigator>
</swiper-item>
</block>
</swiper>
// wxss
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: 2rpx;
}
.
swiper-box .wx-swiper-dot{
width:40rpx;
display: inline-flex;
height: 10rpx;
margin-left: 20rpx;
justify-content:space-between;
}
.swiper-box .wx-swiper-dot::before{
content: '';
flex-grow: 1;
background: rgba(255,255,255,0.8);
border-radius: 8rpx
}
.swiper-box .wx-swiper-dot-active::before{
background:rgba(244,0,0,0.8);
}
3.input 表单的placeholder
写文章的小程序<input class='tel' name='tel' placeholder='您的电话' style='width:100%' placeholder-class='inputPlace'></input> wxss
.inputPlace{
color: #ddd;
font-size: 14px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。