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
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/input.html
<input class='tel' name='tel' placeholder='您的电话' style='width:100%' placeholder-class='inputPlace'></input>
wxss
.inputPlace{ color: #ddd; font-size: 14px; }