IT Developer 18.11.2024

Стилизация полей ввод под расширение 1password

В официальной докуменатции нет решения, поэтому мы написили небольшую подсказу, чтобы не забывать, как это можно сделать.

Часто необходимость подстроить верстку формы авторизации под различные расширения.

Одно из таких расширений 1password, которое добавляет свой значок в поля ввода.

/* Класс компонента с вводом пароля */
.formInputPassword{

}

/* Класс элемента кнопки в поле ввода */
.formInputPassword_button{
	right: 10px;
	transition: 0.2s; /* Добавляем анимацию, что кнопка при появлении 1password 1password 
аккуратно смещалась */
}

/* Изменение положения кнопки, при появлении значка 1password */
body:has(> com‑1password‑button) .formInputPassword:focus‑within 
.formInputPassword_button{
	right: calc(10px + 32px);
}