Question

我有一个包含此代码的表单：

<div id="zipcode-label" class="f-label"><label for="zipcode" class="required">Zip code</label></div>
<div id="first-element" class="f-element"><input type="tel" class='rounder' size="5" name="zipcode" id="zipcode" placeholder="Your Zip code" value="" tabindex="2" pattern="[0-9]{5}" title="Five digit zipcode" required></div>

我想隐藏标签部分（我不想删除它），所以我尝试使用style="display:none"，但由于某种原因它也隐藏了该字段的占位符。

有什么方法可以解决这个问题吗？

Answer 1

用label隐藏display:none;不应影响输入的占位符：

label[for="zipcode"] {
  display:none;
}

<div id="zipcode-label" class="f-label"><label for="zipcode" class="required">Zip code</label></div>
<div id="first-element" class="f-element"><input type="tel" class='rounder' size="5" name="zipcode" id="zipcode" placeholder="Your Zip code" value="" tabindex="2" pattern="[0-9]{5}" title="Five digit zipcode" required></div>

Answer 2

试试这个

.f-label label{display:none}

Answer 3

#zipcode-label {
  display: none;
}

在JSFiddle中为我工作，但我没有你的内部或外部样式表，所以这可能是方程式的一个重要部分

隐藏标签，但同时显示占位符？

3 个答案: