logo标签列表

通过CSS使输入框不可见？

htmlcsshide
17

我有一个表单，根据网站品牌，在给定的位置上应该显示其中两个输入字段中的一个。

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

到目前为止，所有品牌事项都可以使用CSS样式表完成，因此我希望保持现状。 解决方案至少应受IE6及以上版本、Firefox 2及以上版本和Chrome（最新版本）支持。

1
你是否在使用服务器端代码？如果是的话，你可以有条件地渲染一个或另一个字段，而不是使用样式或脚本来实现。 - Joe Chung
是的，那是我目前正在做的事情。但正如我所提到的，我希望只在CSS中保留品牌形象。现在我必须在视图和样式表中都维护品牌形象。 - Boris Callens
为什么你想把品牌变更仅限于CSS中？CSS仅用于样式 - 如果你的品牌需要改变HTML的结构，处理这种情况的适当位置是在HTML中。 - edeverett
因为核心功能基本相同，唯一的区别在于搜索因素的优先级。由于我的部分首先只显示了一些字段（最重要的字段），因此将其他字段隐藏起来会很好。 - Boris Callens
7个回答
18
为什么不使用？
3
这很好。理想情况下，呈现给用户的 HTML 应该在不需要 CSS 的情况下就能够让用户理解。 - edeverett
这将把我的品牌逻辑分散到样式表和视图中。现在我需要在两个地方维护品牌逻辑，而不是一个。 - Boris Callens
在你使用的技术中混淆关注点，只为了快速获得收益，很少是实现易于维护代码的路径。 - edeverett
你觉得你的句子与我的情况有什么关联吗？样式表是用于GUI定义的。品牌纯粹是GUI。功能完全相同。没有快速获利。快速获利的方法是使用条件渲染。现在，每当添加一个品牌时，我必须确保我的条件渲染也考虑到新品牌。 - Boris Callens
如果您正在实现clipboard.js，则此方法将无效，因此在这种情况下，另一个答案可能更合适。 - Felipe Alarcon
13

把不可见的输入字段设置为position: absolute;，可以使其脱离渲染流程。

但是，理论上将其设置为display: none也应该可以实现相同的效果...

display:none 没起作用。但与 position:absolute 结合使用，却起了作用。你能给我解释一下为什么吗？ - Boris Callens
position: absolute 会将任何元素从渲染流中移除，使其对周围的任何其他元素都没有影响。这是覆盖和模态框的常用方法。 - peirix
可能它太老了，已经不能用了（不幸的是 T.T） - Nguyen Tan Dat
10
<style>
.hideme
{
    display:none;
    visibility:hidden;
}
.showme
{
    display:inline;
    visibility:visible;
}
</style>


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

您可以将类设置为“hideme”来隐藏您的控件，或者将类设置为“showme”以显示您的控件。您可以使用JavaScript或服务器端编码来进行切换。

5
它是visibility: hidden，而不是visible: false，它是visibility: visible，而不是visible: true。 - Joe Chung
请参考我帖子第二段的最后一句话。 - Boris Callens
3

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

这不应该发生；display: none应该导致元素不包含在布局中。检查你的CSS（尝试使用Firebug来找出额外的“空间”，它可能只是某个周围元素的padding或margin）。

我认为，这是使用CSS（正如问题所示）完成此操作的唯一方法... - Bhaskar
0

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

如果要隐藏元素，则可以将display设置为none，如果要显示它们，则可以将其设置为block或inline。

要查看display，请访问this

如果设置显示属性无法解决问题，则我认为文本框可能是绝对定位的。这可能是布局未更改的原因。

请发布完整的代码，好吗？

0

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

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

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

-1

我对CSS不是很熟悉，但你可以尝试使用JQuery来实现，它结合了Javascript和CSS，让你能够相对容易地完成这样的操作。

2
我知道，但如果可能的话，我宁愿不依赖JS，因为它也会在没有JS的机器上运行。 - Boris Callens
哦，好的！我是StackOverflow的新手，那我应该删除我的回答吗？谢谢！ - Maxim Zaslavsky
不，就保持原样吧。这是一个有效的答案，只是不是最好的选择而已 ;) - Boris Callens
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接