Как сделать кнопку квадратной с динамической высотой без JS?

Question

[Илья Бондаренко]

Есть инпут, высота которого формируется из высоты вложенного элемента + padding. Необходимо справа от этого инпута сделать квадратную кнопку, такой же высоты как и инпут.

Вопрос: как правильно задать стили этой кнопки, чтобы она оставалась квадратной, даже при условии если кто-то изменит базовую высоту текстового поля. Можно ли реализовать это через CSS только? В голову приходит только вариант захардкодить ширину и высоту кнопки исходя из высоты инпута, но это не гибко

Answer 1

[Виталий Першин]

https://developer.mozilla.org/en-US/docs/Web/CSS/a...
aspect-ratio: 1 / 1;

Comments

[Сергей delphinpro]

или по старинке через паддинг. так делали когда aspect-ratio не было.

[Виталий Першин]

Сергей delphinpro, Да смысла в этом уже особо нет, если aspect-ratio не работает, кнопка от этого работать не перестанет и особо ни на что не повлияет кроме дизайнерских решений.

[Сергей delphinpro]

Виталий Першин, согласен