campo password con show/hide al 90% modifica la visualizzazione

[djjunior]

Salve,
ho un campo password cui ho inserito lo show/hide per la visualizzazione della password, nel css se lascio il width: 100% nessun problema se invece imposto il width: 90% (come impostati tutti gli altri campi come quello mail, per una visualizzazione corretta in resposive) si vede così :login.jpg
Come posso ovviare?
Ecco il css e html del form:

<style>
input{
    font-family:Helvetica,Arial,sans-serif;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
    color:#117bb4;
    background:#FBFBFB none repeat scroll 0 0;
    border:1px solid #117bb4;
    font-size:16px;
    padding: 10px;
    display: block;
    width: 90%;
}

::-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;
  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;
}
</style>
<form>
<input type="text" name="email"  placeholder="E-mail *" pattern="[^@\s]+@[^@\s]+\.[^@\s]+"  required  oninvalid="this.setCustomValidity('Indicare e-mail ')"  onchange="this.setCustomValidity('')" value=""><br>
<input id="password-1" type="password" type="password" name="password" placeholder="Password *" pattern="(?=^.{6,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required  oninvalid="this.setCustomValidity('Indicare password')"  onchange="this.setCustomValidity('')" value="">
</form>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/hideShowPassword.min.js"></script>
<script>
$('#password-1').hidePassword(true);
</script>

P.S. Non mi fa allegare qui il file hideShowPassword.min.js
Grazie per l'aiuto
G.

[stoneweb]

Non ho capito una cosa: il problema di cui parli è che si sovrappone il campo all'icona dell'occhio?
Perché nel codice che hai postato allora manca la parte dell'icona...