如何使用 CSS 隐藏元素的字符串内容？ [复制]答案

【问题标题】：How can I hide string contents of an element with CSS? [duplicate]如何使用 CSS 隐藏元素的字符串内容？ [复制]
【发布时间】：2018-04-13 14:37:25
【问题描述】：

字符串不是元素，是由插件生成的。我有这个代码：

<div class="form-group">
Show results within             
<input type="number" min="0" id="toolset-maps-distance-value" name="toolset_maps_distance_radius" class="form-control js-toolset-maps-distance-value js-wpv-filter-trigger" value="50" required="">
</div>

如何删除字符串“在范围内显示结果”？

【问题讨论】：

font-size: 0 可以做到。
非常感谢我没想到...

标签： html css

【解决方案1】：

如果没有其他文本，您可以更改表单组类：

将文本颜色更改为背景颜色
将字体大小设置为 0。

这会“隐藏”文本。要删除，您可能必须使用 JS。

【讨论】：

【解决方案2】：

您可以在父级上使用 font-size: 0，然后将 font-size 重置为原始样式。

.form-group {
   font-size: 0; 
}
.form-group input {
   font-size: 14px; // the initial value
}

【讨论】：

非常感谢我没想到！

【解决方案3】：

如果不使用 JavaScript 或其他库，您将无法完全删除文本，但您可以将颜色设置为白色，文本将被隐藏或将 font-size 设置为 0；

.form-group{
font-size: 0;
}

<div class="form-group">
Show results within             
<input type="number" min="0" id="toolset-maps-distance-value" name="toolset_maps_distance_radius" class="form-control js-toolset-maps-distance-value js-wpv-filter-trigger" value="50" required="">
</div>

【讨论】：

非常感谢我没想到！

【解决方案4】：

使用 text-indent 偏移文本（将其移出视图）。您必须在 input 元素上设置 display: block，否则它也会被移动。

.form-group { text-indent: -999999em; }
input { display: block; }

<div class="form-group">
  Show results within             
  <input type="number" min="0" id="toolset-maps-distance-value" name="toolset_maps_distance_radius" class="form-control js-toolset-maps-distance-value js-wpv-filter-trigger" value="50" required="">
</div>

【讨论】：

非常感谢我没想到！