顯示/隱藏密碼與物化css正在崩潰響應輸入

我正在使用物化css的窗體。我在這裏有一個與我的登錄項目的鏈接：http://clients.paulofrutuoso.pt/login.html我想在表單中顯示並隱藏密碼。我用這個例子：https://github.com/cloudfour/hideShowPassword 我有這個CSS的圖標顯示/隱藏密碼與物化css正在崩潰響應輸入

::-ms-reveal, 
::-ms-clear { 
    display: none !important; 
} 

.hideShowPassword-toggle { 
    background-color: transparent; 
    background-image: url('../images/wink.png'); /* fallback */ 
    background-image: url('../images/wink.svg'), none; 
    background-position: 0 center; 
    background-repeat: no-repeat; 
    border: 2px solid transparent; 
    border-radius: 0.25em; 
    cursor: pointer; 
    font-size: 100%; 
    height: 44px; 
    margin: 0; 
    max-height: 100%; 
    padding: 0; 
    overflow: 'hidden'; 
    text-indent: -999em; 
    width: 46px; 
    -moz-appearance: none; 
    -webkit-appearance: none; 
} 

.hideShowPassword-toggle-hide { 
    background-position: -44px center; 
} 

.hideShowPassword-toggle:hover, 
.hideShowPassword-toggle:focus { 
    border-color: #0088cc; 
    outline: transparent; 
}

這是HTML：

<div class="container clearfix"> 
    <div class="container-app-club"> 
    <div class="row"> 
     <div class="col s5 right-align"> <img class="responsive-img " src="images/palmeiras.png" width="130" height="130"> </div> 
    <div class="col s2 center-align"><hr class="vertical"/></div>  
    <div class="col s5 left-align"> <img class="responsive-img " src="images/app-brasao.png" width="130" height="130"> </div>   
    </div> 
    </div> 
    <div class="row"> 
    <form class="col s12"> 
     <div class="row"> 
     <div class="input-field col s12"> 
      <input id="email" type="email" class="validate"> 
      <label class="active" data-success="Campo Obrigatório">E-mail</label> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="input-field col s12"> 
      <input id="password-1" type="password" class="validate"> 
      <label class="active" data-error="Campo Obrigatório">Senha</label> 
      <div class="form-error">Campo obrigatório</div> 
     </div> 
     <div class="col s12 right-align"> <a href="recuperarSenha.html" class="link-w">Recupere sua senha!</a> </div> 
     </div> 
    </form> 
    </div> 
    <div class="col s12"> 
    <button class="btn btn-w waves-effect" href="preencher-cpf.html">Login</button> 
    </div> 
    <div class="col s12 center-align" style="margin-top:15px;"> <a href="cadastro.html" class="link-w">Ainda não está registado? Cadastre-se</a> </div> 
</div>

而且我有這個JS的HTML：

$('#password-1').hidePassword(true);

該圖標位於表單的右端，並且切換正常，但輸入的大小沒有以響應的方式顯示。該圖標使輸入負責的設計崩潰。

任何想法來解決這個問題？

非常感謝。

來源

2016-09-20 Paulo Frutuoso

完成。我只是添加這個CSS代碼：

.hideShowPassword-wrapper{ 
    position: relative; 
    display: inline-block; 
    vertical-align: baseline; 
    width: 100%!important; 
} 


.hideShowPassword-field{ 
    margin: 0px; 
    padding-right: 0!important; 
}

來源

2016-09-20 15:42:58

顯示/隱藏密碼與物化css正在崩潰響應輸入

回答

相關問題