CSS — прозрачный фон, как отключить background

Прозрачный фон для формы INPUT
Прозрачный фон для формы INPUT

По умолчанию фон всегда идет белый и как бы мы не пытались это сделать — ничего не получится. Несколько вариантов задать прозрачный фон для INPUT формы средствами CSS также не решат задачу и будут отображать белый фон (см. скриншот ниже). Решение ниже.

Белый фон для формы INPUT
Белый фон для формы INPUT

Решения на CSS

Стили ниже не помогут убрать фон из формы, а прозрачность OPACITY и вовсе зацепит все элементы (текст, обводку, фон). Поэтому приходится использовать графику

Прозрачный фон картинкой

  • создаем картинку любых размеров, желательно 1×1 пиксель;
  • задаем ей прозрачность через любой графический редактор;
  • задаем ее, как фон для соответствующего объекта;

HTML и CSS для картинки

<input name="anyname" type="text" size="20" value="" >
input{
  background: url('nobg.png') repeat;
}

Читайте также

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *