使用具体化 css 显示/隐藏密码正在崩溃响应输入

Question

我正在使用带有物化 css 的表单。我在这里有我的登录项目的链接：http://clients.paulofrutuoso.pt/login.html 我想在表单中放置一个显示和隐藏密码。我正在使用这个例子：https://github.com/cloudfour/hideShowPassword 我有这个用于图标的 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>

我在 html 中有这个 JS：

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

该图标位于表单的右端，它可以很好地切换，但输入的大小不会以响应方式显示。该图标使输入负责设计崩溃。

有解决这个问题的想法吗？

非常感谢。

Answer 1

完成。我只是添加了这个 css 代码：

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


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