Applet modification style (placeholder, checkbox style)

Applet Modify the style （ placeholder、checkbox The style of ）

Applet Modify the style placeholder style

.wxml
  <input placeholder=" Please enter a user name " placeholder-class="placeholderClass" />

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

Applet Modify the style （ checkbox The style of ）

.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' }}"> Remember the user name </text> 
    </label>
</checkbox-group>

.wxss
/*  modify checkbox The style of  */
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, //  Whether to display the password 
    showType:"text", //  Password and text The type of 
    isCheckPwd:false, //  Whether to remember the user name 
  },

  //  Switch password format 
  changePwdType(){
    
    if (this.data.isShowPwd) {
       // If this.data.isShow by true, It is expressed as password small black dot 
      this.setData({
    
        isShowPwd:false,
        showType:"password"
      })
    } else {
    
      this.setData({
    
        isShowPwd: true,
        showType: "text"
      })
    }
  },
  //  Remember the user name 
  checkboxChange(e){
    
    console.log("checkboxChange",e.detail.value.length);
    let resChecked = true
    e.detail.value.length ? resChecked = true:resChecked = false
    this.setData({
    
      isCheckPwd:resChecked
    })
  },

.

• effect