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;
}

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

JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

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