May 10, 2022

CSS-cелекторы формы

Оформление формы

/*оформляем заголовок, можно использовать класс .f-header (без тега p)*/

.part-header p { font-weight: 100; }

/*поля ввода*/

.part-userField input {

border-top: 0; border-left: 0; border-right: 0; /* задаём оформление нижней границе */ border-bottom: 1px solid #aa8b73; /* прозрачный фон полей ввода */ background: transparent; height: 35px; color: #aa8b73; }

/*подсказка для полей*/

.part-userField input::placeholder { color: #ffffff; }

/*убираем углы при скруглении*/

.lt-form .f-input { border-radius: 15px; outline: none; }

Смена фона выбранного предложения

.form-position.selected { background: #cc00cc;}

Кнопка

.btn { background: linear-gradient(to right, #9900cc 16%, #ffff00 102%); border-radius:20px 20px;}

.part-button button { min-height: 35px; padding-left: 30px; padding-right: 30px; background-color: transparent!important; border: 1px solid #ffffff; border-radius: 30px; }/* оформляем кнопку: высота, внутренние отступы, цвет и граница */

.part-button button:hover { background-color: #A63F00; border: 1px solid #ffffff; border-radius: 30px; }