Повторное использование свойств CSS/расширение без препроцессоров ⇐ Html

[Anonymous]

Я использую Publii (генератор статического сайта) для создания веб -сайта и подбежал к проблеме при создании контактной формы. Проблема, которая у меня есть, заключается в том, что текущий цвет заполнителей - это цвет браузеров по умолчанию. Так что у меня нет переменной CSS, но я также не могу использовать препроцессор из-за Publii.

Код: Выделить всё

Your Name


Your Email


Submit
< /code>
И это код CSS, отвечающий за анимирование плавающих меток: < /p>
.floating-label{
position: relative;
margin-bottom: 30px;
}

.floating-label:last-child{
margin-bottom: 0;
}

.floating-label label{
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
font-size: 16px;
padding: 0 5px;
pointer-events: none;
transition: all 0.3s ease;
color: I need to color this with the browsers default placeholder color;
background-color: transparent;
}

.floating-label input:focus,
.floating-label input:not(:placeholder-shown){
outline: none;
}

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label{
top: 0;
font-size: 12px;
background-color: var(--page-bg);
padding: 0 5px;
}

.floating-label input::placeholder{
color: transparent;
}

Я спрашиваю об этом, несмотря на то, что на этой теме было много сообщений, потому что все они используют либо переменные CSS, либо препроцессоры.


Подробнее здесь: https://stackoverflow.com/questions/796 ... processors