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

作为一般规则，您绝不应完全删除outline或:focus样式。

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

...使用outline: none而没有适当的后备功能，使得您的网站对于任何仅限键盘的用户而言都显着降低，而不仅仅是那些视力下降的用户。确保始终为您的互动元素提供明确的焦点指示。

Answer 6

如果只需要它的存在，也可以使用display: fixed; right: -1000px;将其从屏幕上移开。需要复制到剪贴板的输入时，此功能很有用。：）

Answer 7

如果您还想在聚焦时删除轮廓，请尝试：

input[type="text"],
input[type="text"]:focus   
{
         background: transparent;
         border: none;
         outline-width: 0;
}

是否有纯CSS方式使输入透明？

7 个答案: