纯CSS

Question

假设我有

<div class="dataTables_filter">
    <label>
    Search: <input type="text">
    </label>
</div>

我想用css隐藏文本“搜索：”，如何匹配文本“搜索：”并应用display：none？

我尝试将文本作为标签的第一个孩子进行匹配，但是不起作用，它也隐藏了输入

.dataTables_filter label:first-child {
    display: none;
}

编辑：请从字面上理解我的问题：即不能以任何方式改变HTML只是利用CSS。

Answer 1

纯CSS

您可以使用the :first-line pseudo element，并结合font-size 0：

.dataTables_filter:first-line {
   font-size: 0;
}

JSFiddle demo

Answer 2

您是否尝试在span标记中包含“搜索：”一词？然后，您可以为span标记指定一个id，并将span：none设置为span标记。

Answer 3

您的HTML格式错误。它应该如下：

<label for="search">Search:</label> <input type="text" id="search" />

您的CSS将如下：

.dataTables_filter [for=search] { display:none; } /* Don't reserve space for label */

OR

.dataTables_filter [for=search] { visibility:hidden; } /* reserve space for the label, but don't show its contents */

Answer 4

查看此示例..，Example Link 此示例使用CSS3选择器（：not（）和[attr * =]）以及每次修改搜索输入时重写样式规则

使用class name =“searchable”创建列表，列表中的元素很少

<input type="text" placeholder="search" id="search">
<style id="search_style"></style>

<script type="text/javascript">
var searchStyle = document.getElementById('search_style');
document.getElementById('search').addEventListener('input', function() {
if (!this.value) {
searchStyle.innerHTML = "";
return;
}

searchStyle.innerHTML = ".searchable:not([data-index*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";

});

CSS：匹配块内的第一个单词

4 个答案:

纯CSS