15

我有一个表单，根据网站的品牌，两个输入字段之一应该在一个给定位置可见。

我想我只是将两个输入字段放在同一个容器中，然后通过我的样式表将其中一个设置为 display:none; 这确实隐藏了该字段，但它仍然占用空间。我还尝试将高度和宽度设置为 0 或将可见性设置为隐藏或折叠，但这些都不起作用。

直到现在，所有的品牌化事情都可以用 css 样式表来完成，所以我想保持这种方式。该解决方案至少应在 IE6 及更高版本、Firefox 2 及更高版本和 Chrome（最新）中得到支持。

4

7 回答 7

17

你为什么不使用输入type="hidden"？

于 2009-07-03T09:01:57.197 回答
13

如何设置position: absolute;应将其从渲染流中取出的不可见输入字段。

但是，将其设置为display: none理论上应该做同样的事情......

于 2009-07-03T09:11:34.493 回答
8 
<style>
.hideme
{
    display:none;
    visibility:hidden;
}
.showme
{
    display:inline;
    visibility:visible;
}
</style>


<input type="text" name="mytext" class="hideme">

您可以设置 class="hideme" 以隐藏您的控件或设置 class="showme" 以显示您的控件。您可以使用 JavaScript 或服务器端编码设置此切换。

于 2009-07-03T09:04:45.320 回答
3

这确实隐藏了该字段，但它仍然占用空间。

这不应该发生；display: none 应该导致元素不包含在流中。检查你的 CSS 的其余部分（尝试使用 Firebug 找出额外的“空间”来自哪里，这可能只是一些周围元素的填充或边距）。

于 2009-07-03T09:08:27.230 回答
0

即使元素不可见，使用可见性属性也会占用渲染空间。您必须使用显示属性，而不是使用可见性。

如果要隐藏元素，可以将显示设置为无，如果要显示它们，则可以将其显示为阻塞或内联。

要查看显示，请检查此

如果设置您的显示属性不能解决您的问题，那么我认为文本框可能是绝对定位的。这可能是布局不改变的原因。

你能发布完整的代码吗？

于 2009-07-03T09:09:23.873 回答
0

如果您想将 css 代码与其他输入隔离开来，您可以这样做：

input[type="checkbox"] {
    display: none;
}

您还可以通过指示另一个类来进一步将其与同一类型隔离。

于 2020-05-31T01:15:44.990 回答
-1

我对 CSS 不太熟悉，但你可以尝试实现结合了 Javascript 和 CSS 的JQuery，让你相对轻松地做类似的事情。

于 2009-07-03T08:59:32.990 回答