Как сделать input прозрачным в css
Ответы
Вячеслав Межуревский
05 октября 2022
Для того, что бы сделать поле ввода (input) прозрачным, достаточно выставить свойству background элемента, значение transparent. Рассмотрим пример, в котором мы дополним наш input и другими стилями для наглядности.
Исходный HTML файл и стили:
<div class="wrapper">
<input type="text" id="text" placeholder="Введите данные">
</div
Стили:
.wrapper {
/* Наше поля ввода будет прозрачным, поэтому добавим блок-обертку с цветом */
width: 200px;
height: 30px;
background-color: #fff4e6;
}
input {
/* Делает само поле ввода прозрачным */
background: transparent;
/* Убираем рамки вокруг поля ввода */
border: none;
/* Добавим нижнюю черту для красоты */
border-bottom: 1px solid #444;
}
Результат:
1
0