有没有一种纯css的方法使输入透明?

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

没人会知道它在那里。

我喜欢这样做

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

设置 outline 属性到 none 当光标进入时停止浏览器突出显示框

前面描述的两种方法今天还不够。我个人使用:

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。

我将不透明度设置为0。这使得它消失了,但当你点击它的时候仍然可以使用。

一般来说,您不应该完全删除 outline 或 :focus 风格。

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

…使用 outline: none 如果没有适当的回退,那么你的站点对于任何只使用键盘的用户来说都会变得很难访问,而不仅仅是那些视力下降的用户。确保总是给你的交互元素一个可见的焦点指示。