Есть ли чистый способ CSS сделать ввод прозрачным?

Question

Как сделать этот ввод прозрачным?

<input type="text" class="foo">

Я пробовал это, но это не работает.

background:transparent url(../img/transpSmall.png) repeat scroll 0 0;

Answer 1

input[type="text"]
{
    background: transparent;
    border: none;
}

Никто даже не узнает, что это там.

Answer 2

Мне нравится это делать

input[type="text"]
{
    background: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
}

Если для свойства outline установлено значение none, браузер не выделяет поле, когда курсор вводит

Answer 3

Двух описанных ранее методов сегодня недостаточно. Я лично использую:

input[type="text"]{
    background-color: transparent;
    border: 0px;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width:5px;
    color:transparent;
    cursor:default;
}

Он также удаляет тень, установленную в некоторых браузерах, скрывает текст, который может быть введен, и заставляет курсор вести себя так, как будто ввода не было.

Вы также можете установить ширину в 0px.

Answer 4

Я установил непрозрачность на 0. Это заставило его исчезнуть, но все еще работает, когда вы нажимаете на него.

Answer 5

В случае, если вам просто нужно его наличие, вы также можете выбросить его с экрана с помощью display: fixed; right: -1000px;. Это полезно, когда вам нужен вход для копирования в буфер обмена. :)

Answer 6

Как правило, вы никогда не должны полностью удалять стиль outline или :focus.

https://a11yproject.com/posts/never-remove-css-outlines

... использование outline: none без надлежащих откатов делает ваш сайт значительно менее доступным для любого пользователя, использующего только клавиатуру, а не только для пользователей с ослабленным зрением. Убедитесь, что ваши интерактивные элементы всегда четко обозначают фокус.