Html 是否有一种纯 CSS 方法可以使输入透明？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1351966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a pure CSS way to make an input transparent?
提问by fmsf
How can I make this input transparent?
如何使此输入透明？
<input type="text" class="foo">
I've tried this but it doesn't work.
我试过这个，但它不起作用。
background:transparent url(../img/transpSmall.png) repeat scroll 0 0;
回答by
input[type="text"]
{
background: transparent;
border: none;
}
Nobody will even know it's there.
甚至没有人会知道它在那里。
回答by fmsf
I like to do this
我喜欢这样做
input[type="text"]
{
background: rgba(0, 0, 0, 0);
border: none;
outline: none;
}
Setting the outlineproperty to nonestops the browser from highlighting the box when the cursor enters
设置outline属性以none阻止浏览器在光标进入时突出显示框
回答by frank
The two methods previously described are not enough today. I personnally use :
前面描述的两种方法在今天是不够的。我个人使用：
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;
}
It also removes the shadow set on some browsers, hide the text that could be input and make the cursor behave as if the input was not there.
它还删除了某些浏览器上设置的阴影，隐藏可以输入的文本并使光标表现得好像输入不存在一样。
You may want to set width to 0px also.
您可能还想将宽度设置为 0px。
回答by bananasplitter
I set the opacity to 0. This made it disappear but still function when you click on it.
我将不透明度设置为 0。这使它消失，但在您单击它时仍然起作用。
回答by derekshirk
As a general rule, you should never completly remove the outlineor :focusstyle.
作为一般规则，您永远不应该完全删除outlineor:focus样式。
https://a11yproject.com/posts/never-remove-css-outlines
https://a11yproject.com/posts/never-remove-css-outlines
...using
outline: nonewithout proper fallbacks makes your site significantly less accessible to any keyboard only user, not only those with reduced vision. Make sure to always give your interactive elements a visible indication of focus.
...在
outline: none没有适当回退的情况下使用会使任何仅使用键盘的用户（不仅是视力不佳的用户）更难以访问您的网站。确保始终为您的交互元素提供可见的焦点指示。
回答by Caveman
In case you just need the existence of it you could also throw it off the screen with display: fixed; right: -1000px;. It is useful when you need an input for copying to clipboard. :)
如果您只需要它的存在，您也可以使用display: fixed; right: -1000px;. 当您需要复制到剪贴板的输入时，它很有用。:)
