Html 通过css使输入不可见？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1078451/
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
Make input invisible through css?
提问by Boris Callens
I have a form where depending on the website's brand one of two input fields should be visible at one given spot.
我有一个表格，根据网站的品牌，两个输入字段之一应该在一个给定的位置可见。
I figured I just put both input fields in the same container and then through my stylesheet set one of them to display:none; This does hide the field, but it still makes it take up space. I also tried setting the height and width to 0 or setting visibility to hidden or collapse but none of those worked.
我想我只是将两个输入字段放在同一个容器中，然后通过我的样式表将其中一个设置为 display:none; 这确实隐藏了字段，但它仍然会占用空间。我还尝试将高度和宽度设置为 0 或将可见性设置为隐藏或折叠，但这些都不起作用。
Untill now all the branding things could be done with css style sheets so I would like to keep it that way. The solution should at least be supported in IE6 & up, Firefox 2 & up and Chrome (latest).
直到现在，所有的品牌化工作都可以用 css 样式表来完成，所以我想保持这种方式。该解决方案至少应在 IE6 及更高版本、Firefox 2 及更高版本和 Chrome（最新）中受支持。
采纳答案by peirix
What about setting the invisible input field to position: absolute;which should take it out of the rendering flow.
如何设置不可见的输入字段position: absolute;，应该将其从渲染流程中取出。
However, setting it to display: noneshould in theory do the same...
但是，将其设置为display: none理论上应该做同样的事情......
回答by buildog
why don't you use input type="hidden"?
你为什么不使用输入type="hidden"？
回答by Bhaskar
<style>
.hideme
{
display:none;
visibility:hidden;
}
.showme
{
display:inline;
visibility:visible;
}
</style>
<input type="text" name="mytext" class="hideme">
You can either set class="hideme" to hide your control or class="showme" to show your control. You can set this toggeling using JavaScript or server side coding.
您可以设置 class="hideme" 以隐藏您的控件或设置 class="showme" 以显示您的控件。您可以使用 JavaScript 或服务器端编码设置此切换。
回答by Rahul
This does hide the field, but it still makes it take up space.
这确实隐藏了字段，但它仍然会占用空间。
This shouldn't happen; display: none should cause the element to not be included in the flow. Check the rest of your CSS (try using Firebug to figure out where the extra "space", which is probably just padding or margin of some surrounding element, is coming from).
这不应该发生；display: none 应该导致元素不包含在流中。检查 CSS 的其余部分（尝试使用 Firebug 找出额外的“空间”，这可能只是某些周围元素的填充或边距，来自何处）。
回答by rahul
Using the visibility property takes up rendering space even if the element is not visible. Instead of using visivility you have to use display property.
即使元素不可见，使用可见性属性也会占用渲染空间。您必须使用显示属性，而不是使用可见性。
You can set the displayto noneif you want to hide the element and display to blockor inlineif you want to show them.
如果要隐藏元素，可以将display设置为none，如果要显示元素，可以将 display 设置为block或inline。
To have a look on display check this
要查看显示，请检查此
If setting your display property doesn't solve your problem, then I think the textboxes might be absolutely positioned. It might be the reason for the layout not to be changed.
如果设置您的显示属性不能解决您的问题，那么我认为文本框可能是绝对定位的。这可能是布局未更改的原因。
Can you please post the complete code?
可以发一下完整的代码吗？
回答by Karlo J.
You can do this if you want to isolate the css code from other input:
如果您想将 css 代码与其他输入隔离，您可以这样做：
input[type="checkbox"] {
display: none;
}
You can also further isolate it from the same type by indicating another class.
您还可以通过指示另一个类来进一步将其与同一类型隔离。
