使输入表单不可见

Posted 2023-02-24

【中文标题】使输入表单不可见

【英文标题】：Make input form invisible

【发布时间】：2013-11-10 10:44:45

【问题描述】：

我有显示在背景文本图像上的输入表单。 我希望输入表单不可见，以便用户可以插入输入，但不会显示白色空白表单，只会显示背景。 我尝试了“透明”属性，但它涵盖了表单和背景文本图像。 您可以在这里的图像上看到它现在的样子，在另一张图像中看到我想要的样子。 谢谢。 这就是我现在的样子： http://i.imgur.com/DsfcD8g.jpg 这就是我想要的： http://i.imgur.com/gaZZzrr.jpg

【参考方案1】：

您可以使元素透明：

form *
    border: none;
    background-color: transparent;

注意：这会将其应用于表单中的所有元素，您需要根据您拥有/想要的内容修改您的选择器

【讨论】：

是的，这就是我在上传图像的第一个表单中所做的，这使得表单和图像透明。

那有什么问题呢？

我希望看到文本图像，请查看我在帖子中添加的第二张图像。现在我那里有白场。

您应该只使背景色透明并将边框设置为无。这样您的文本仍将显示。您是否尝试过我回答中的代码？

我做了，结果和我一样。

【参考方案2】：

我刚刚在 IE5、7、8、9、10、11、Chrome、Safari、FF 和 Opera 上尝试了 Kenneth 的解决方案。一切正常。

你用的是什么浏览器？你能提供一个活生生的例子吗？

【参考方案3】：

input[type=text],
textarea 
    background: transparent;
    border: none;


/* This if you don't want an outline on focus - bad for accessibility */
input[type=text]:focus,
textarea:focus 
    outline: none;