Как сделать 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.
Как сделать прозрачную форму поиска
Как сделать прозрачную форму поиска и такую кнопку возле неё?
/*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
прозрачный type=text
На сколько я знаю в html текст прозрачным не может быть, на то он и текст чтоб его читали. Если даже текст прозрачным сделать, как же в форму что-то писать, вы думаете это будет читабельно? ——————— UPD: Хотя попробуйте это применить: filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5;
На сайте с 02.08.2008
23 мая 2011, 22:33
Сашко:
. UPD: Хотя попробуйте это применить: filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5;
— filter работать будет в только в осле — даже если через фреймворк установить прозрачность в 0 ПСы отследят и накажут уж лучше за экран текст задвинуть — более кошерный дизайнерский приём, могут не штрафануть.
show must go on .
На сайте с 29.05.2008
23 мая 2011, 22:43
А для input[type*=text] задать беграунд не судьба? Или уже задать id, а потом в CSS.
На сайте с 10.05.2007
24 мая 2011, 05:25
или я не так выразился или вы не так поняли, прозрачным должен быть не текст а именно поле для ввода
На сайте с 02.08.2008
24 мая 2011, 05:27
alexpnet:
или я не так выразился или вы не так поняли, прозрачным должен быть не текст а именно поле для ввода