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

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 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.

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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