Недавно я пишу веб -сайт, который рекомендует адвоката на стойке регистрации. В поле поиска была проблема. Я хотел поместить значок поиска в поле поиска, но после долгого времени это было не очень удовлетворительно ...
Без лишних слов, давайте перейдем к теме:
Основные идеи
Фактически, поместите входную коробку и значок позади него в DIV, затем установите border ввода в 0PX и, наконец, установите border DIV на конечную внешнюю границу
Мы загрузим код напрямую:
HTML:
<div class = search> <form action = http: //baidu.com> <input type = text waceholder = пожалуйста, введите адвокат или экспертизу, который вы искали> <pan> <a href =#> <img src = img/icon1.png alt => </a> </span> </form> </div> icon1.png alt => </a> </span> </form> </div> icon1.
CSS:
Вот стиль установки всего Div снаружи
.search {ширина: 250px; Высота: 35px; Граница: 1px сплошной белый; граница радиус: 30px;}Здесь нужно установить длину и ширину блока ввода внутри, бодер составляет 0PX, размер шрифта внутри, и граница не будет яркой при нажатии (наброски: нет)
Установите прозрачность здесь с использованием rgba() , последнее свойство-прозрачность (между 0-1)
Вход {ширина: 200px; Высота: 35px; граница: 0; размер шрифта: 14px; Схема: нет; фоновый цвет: rgba (255, 255, 255, 0); Цвет: белый; размер шрифта: 16px; Покрас: 0 10px; СуммироватьЭто статья о коде реализации HTML добавления значков в поле прозрачного ввода. Для получения более связанного содержимого значка ввода HTML прозрачного ввода, пожалуйста, найдите предыдущие статьи с wulin.com или продолжайте просматривать соответствующие статьи ниже. Я надеюсь, что все будут поддерживать wulin.com в будущем!