<div class="form-group form-group-password">
<label class="form-group-label">Пароль <span>*</span></label>
<input id="signin-modal-password" name="signin-modal-password" type="password" class="form-control js-password"
placeholder="Введите пароль"
>
<button class="js-show-password-btn show-password-btn" type="button">
<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8805 4.68734C15.7377 4.52803 12.3026 0.78125 8.00002 0.78125C3.69745 0.78125 0.262328 4.52803 0.119484 4.68734C-0.0398281 4.86541 -0.0398281 5.13459 0.119484 5.31266C0.262328 5.47197 3.69752 9.21875 8.00002 9.21875C12.3025 9.21875 15.7377 5.47197 15.8805 5.31266C16.0398 5.13459 16.0398 4.86541 15.8805 4.68734ZM8.00002 8.28125C6.19092 8.28125 4.71877 6.80909 4.71877 5C4.71877 3.19091 6.19092 1.71875 8.00002 1.71875C9.80911 1.71875 11.2813 3.19091 11.2813 5C11.2813 6.80909 9.80911 8.28125 8.00002 8.28125Z"/>
<path d="M8.46875 4.0625C8.46875 3.59094 8.70284 3.17609 9.05897 2.92094C8.73941 2.75734 8.38297 2.65625 8 2.65625C6.70772 2.65625 5.65625 3.70772 5.65625 5C5.65625 6.29228 6.70772 7.34375 8 7.34375C9.157 7.34375 10.1146 6.49894 10.3038 5.39506C9.35987 5.69897 8.46875 4.98506 8.46875 4.0625Z"/>
</svg>
</button>
</div>
$('.js-show-password-btn').click(function() {
var pass = $(this).prev('.js-password');
$(pass).attr('type', $(pass).attr('type') === 'password' ? 'text' : 'password');
});
.form-group-password {
position: relative;
.form-control {
padding-right: 45px;
}
}
.show-password-btn {
position: absolute;
right: 0;
bottom: 0;
.flex();
.flex-start();
.align-items-center();
.box-sizing();
padding-right: 15px;
height: 40px;
width: 45px;
svg {
margin: auto;
}
path {
fill: #000000;
fill-opacity: 0.3;
}
&:hover, &:active {
path {
fill-opacity: 0.9;
}
}
}