Как сделать прозрачную форму поиска
Как сделать прозрачную форму поиска и такую кнопку возле неё?
/*Search form*/ .search img < position: relative; top: 4px; >.search-form < display: inline-block; position: relative; >.search-form-input < max-width: 200px; height: 35px; line-height: 28px; margin: 0; padding: 0 38px 0 10px; border: 1px solid #d5d5d5; border-radius: 0; background-color: white; box-sizing: border-box; font-family: Tahoma, sans-serif; font-size: 13px; >.search-form-btn < position: absolute; right: 2px; top: 2px; width: 28px; height: 28px; line-height: 28px; /* Просто тюнинг внешнего вида */ color: #666; font-weight: bold; margin: 0; padding: 0; border: 0; border-radius: 0; background-color: transparent; text-align: center; cursor: pointer; >/*and search form*/
Отслеживать
задан 14 ноя 2017 в 19:03
648 6 6 серебряных знаков 22 22 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
поставьте background: transparent; Если нужно, чтобы кнопка была за рамкой используйте border не на форме а на input
body < background-color: blue; >/*Search form*/ .search img < position: relative; top: 4px; >.search-form < display: inline-block; position: relative; >.search-form-input < max-width: 200px; height: 35px; line-height: 28px; margin: 0; padding: 0 38px 0 10px; border: 1px solid #d5d5d5; border-radius: 0; /*background-color: white;*/ background: transparent; box-sizing: border-box; font-family: Tahoma, sans-serif; font-size: 13px; >.search-form-btn < position: absolute; right: 2px; top: 2px; width: 28px; height: 30px; line-height: 28px; /* Просто тюнинг внешнего вида */ color: #666; font-weight: bold; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba( 255, 255, 255, 0.4); text-align: center; cursor: pointer; >button img < width: 30px; height: 100%; >/*and search form*/ Вариант 2, почистил:
body < background: url("https://3dnews.ru/assets/external/illustrations/2015/06/17/915789/kb4.jpg") 100% 100% no-repeat; background-position: center center; background-size: cover; >* < box-sizing: padding-box; >.search-form-input < max-width: 200px; height: 35px; margin-right: 5px; padding: 0 1rem; border: 1px solid #d5d5d5; background: transparent; font-family: Tahoma, sans-serif; font-size: 13px; >.search-form-btn
Как сделать input прозрачным в css
WordPress 6 с Нуля до Гуру
Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS — WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.
Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.
Помимо уроков к курсу идут упражнения для закрепления материала.
И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.
Уроки и статьи
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт Моя группа
Как сделать input прозрачным в css
Для того, что бы сделать поле ввода (input) прозрачным, достаточно выставить свойству background элемента, значение transparent. Рассмотрим пример, в котором мы дополним наш input и другими стилями для наглядности.
Исходный HTML файл и стили:
class="wrapper"> type="text" id="text" placeholder="Введите данные"> .wrapper /* Наше поля ввода будет прозрачным, поэтому добавим блок-обертку с цветом */ width: 200px; height: 30px; background-color: #fff4e6; > input /* Делает само поле ввода прозрачным */ background: transparent; /* Убираем рамки вокруг поля ввода */ border: none; /* Добавим нижнюю черту для красоты */ border-bottom: 1px solid #444; > 
Результат:
нужно сделать прозрачный input
как сделать через CSS или html прозрачный инпут, макет ниже
Голосование за лучший ответ
background-color: rgba(0, 150, 255, 0.3); /* светло-голубой полупрозрачный */
background-color: transparent; /* полностью прозрачный */
Ну и border: 1px solid #aab;
Артем ПроненкоУченик (200) 4 года назад
неа, не работает
Артем ПроненкоУченик (200) 4 года назад
пробовал уже все что можно. все форумы перерыл. может в css что-то мешает. да же все тоже пробовал
Как пробовали: HTML: < input type="text" size="40" >css: input[type=»text»] < border:0px; background-color:transparent; >
Похожие вопросы
Ваш браузер устарел
Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.