小程序 修改样式 （ placeholder、checkbox的样式）

小程序 修改样式 placeholder 样式

.wxml
  <input placeholder="请输入用户名" placeholder-class="placeholderClass" />

.wxss
.placeholderClass{
    
	font-weight: 400;
	color:  rgba(0, 0, 0, 0.14);
}

小程序 修改样式 （ checkbox的样式）

.wxml
  <checkbox-group class="login-remember-check" bindchange="checkboxChange">
    <label class="checkbox">
      <checkbox class="login-remember-check-active" bindchange="checkboxChange" checked="{
    { isCheckPwd }}"/>
      <text class="{
    { isCheckPwd ? 'login-remember-check' : 'login-remember-no-check' }}">记住用户名</text> 
    </label>
</checkbox-group>

.wxss
/* 修改checkbox的样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before,
checkbox .wx-checkbox-input.wx-checkbox-input {
    
  border-color:#14D1B4;
  color: #14D1B4;
}

.js
  data: {
     
    isShowPwd:true, // 是否显示密码
    showType:"text", // 密码与text的类型
    isCheckPwd:false, // 是否记住用户名
  },

  // 切换密码格式
  changePwdType(){
    
    if (this.data.isShowPwd) {
       //如果this.data.isShow为true,则表示为密码小黑点
      this.setData({
    
        isShowPwd:false,
        showType:"password"
      })
    } else {
    
      this.setData({
    
        isShowPwd: true,
        showType: "text"
      })
    }
  },
  // 记住用户名
  checkboxChange(e){
    
    console.log("checkboxChange",e.detail.value.length);
    let resChecked = true
    e.detail.value.length ? resChecked = true:resChecked = false
    this.setData({
    
      isCheckPwd:resChecked
    })
  },

.

• 效果