有没有一种纯CSS的方法使输入框透明？

Question

我该如何让这个输入框透明？

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

我尝试过这个方法，但它没有起作用。

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

- fmsf

---

将输入设置为与其背景颜色相同。 - OMG Ponies

你确定你不只需要一个input type="hidden"吗？ - Rich Bradshaw

可能是一个垃圾邮件陷阱，这是一个合法的用途，尽管有可见但仍可聚焦的东西并不是一个好主意。 - Kzqai

@Rich，那么它就不可编辑了...如果您已经设置了容器的颜色，为什么还要在输入标签上设置它呢？ - CaffGeek

Answer 1

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

没有人会知道它的存在。

- user151323

---

@Metropolis很高兴地报告，2016年没有人关心这件事。 - Denis

这在 Netscape 1.0 和 Zune 上会出现问题。 - shrewmouse

我的马铃薯不支持这个。 - BLAZORLOVER

如果你想要在获得焦点时同时移除输入框的轮廓，可以使用以下代码：`input[type="text"], input[type="text"]:focus { background: transparent; border: none; outline-width: 0; }` 请注意，这不会改变原来的意思，只是使内容更加通俗易懂。 - Mubramaj

在我的情况下，这个解决方案只在Firefox中有效，在Chrome中无效。 - Mohammad reza hedayat nia

在输入时，为框的阴影添加 outline: none;。 - Yasser CHENIK

Answer 2

我喜欢做这个

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

将outline属性设置为none可以防止浏览器在光标进入时突出显示框。

- user2985029

---

outline: none会破坏键盘可访问性。请参见@derekshirk的答案。 - Volker E.

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。

- frank

Answer 4

如果你想在聚焦时同时删除轮廓，请尝试以下方法：

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

- Mubramaj

Answer 5

我将不透明度设置为0。这使它消失了，但仍然可以在单击时正常工作。

- bananasplitter

Answer 6

如果你只需要它的存在，你也可以使用 display: fixed; right: -1000px; 将其扔到屏幕外。当你需要一个输入框来复制到剪贴板时，这非常有用。 :)

- Caveman

Answer 7

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

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

使用outline: none而没有适当的回退会使您的网站对任何仅使用键盘的用户，而不仅仅是视力受损的用户，显著降低可访问性。请确保始终为您的交互元素提供可见的焦点指示。

- derekshirk