Как сделать input прозрачным в css
4 года назад
Человек-Молекула
Для того, что бы сделать поле ввода (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; }
Результат:
3 года назад
Вячеслав Межуревский
Фронтенд-разработчик
Изучите HTML, CSS, JavaScript и React
Посмотреть →
Профессиональная верстка
Адаптивная вёрстка для отображения на любых устройствах
Позиционирование в CSS
Получите навык работы с CSS и адаптивными интерфейсами
SASS
Освоите препроцессор SASS и стилизацию веб-приложений
Анимация CSS
Освоите CSS-анимации для улучшения UX
Полный список доступных курсов по разным направлениям
Похожие вопросы
Курсы по веб-разработке
Хекслет
Направления
Профессии
Навыки
support@hexlet.io
t.me/hexlet_help_bot
RU
бесплатно по РФ
бесплатно по Москве