Question

这是我的Div：

<div id="show" class="dataTables_length">
    Show 
    <select size="1" name="show_length">
        <option value="10" selected="selected">10</option>
        <option value="20">25</option>
        <option value="30">50</option>
        <option value="40">100</option>
   </select> 
   entries
</div>

我想隐藏此show和entries文字我应该如何使用css隐藏它？不使用javascript或jquery。

Answer 1

.someClass {
  display: none; 
}

试过这个？我相信这会做到的！

它会是这样的：

<span class="someClass">Show</span>
<!-- select statement here -->
<span class="someClass">Enteries</span>

我以为你想把它藏起来！

Answer 2

试试这个：

<div id="show" class="dataTables_length">
    <span class="hidden">Show</span>
    <select size="1" name="show_length">
        <option value="10" selected="selected">10</option>
        <option value="20">25</option>
        <option value="30">50</option>
        <option value="40">100</option>
    </select> 
    <span class="hidden">entries</span>
</div>

使用CSS：

span.hidden {
    display: none;
}

Answer 3

您可以扭曲要隐藏的项目周围的范围，然后隐藏它。例如

<span class="hide">Show</span>

和css：

.hide{display:none;}

您的完整HTML将如下所示：

<div id="show" class="dataTables_length">
    <span class="hide">Show</span>
    <select size="1" name="show_length">
        <option value="10" selected="selected">10</option>
        <option value="20">25</option>
        <option value="30">50</option>
        <option value="40">100</option>
    </select> 
    <span class="hide">entries</span>
</div>

Answer 4

<div id="show" class="dataTables_length">
    <span style="visibility:hidden">Show </span>
    <select size="1" name="show_length">
        <option value="10" selected="selected">10</option>
        <option value="20">25</option>
        <option value="30">50</option>
        <option value="40">100</option>
   </select> 
  <span style="visibility:hidden">  entries </span>
</div>

Answer 5

尽管有如此多的答案和评论，但您似乎还没有准备好接受文本需要包含在span中的事实。那也只使用css！

所以，你可以像这样隐藏faux： http://jsfiddle.net/abhitalks/R7Yt4/1/

CSS：

div#show {
    background-color: #ccc;
    color: #ccc;
}

div#show::selection {
    color: #ccc;
}

div#show > select {
    color: #fff;
}

使用css隐藏div后的文本

5 个答案: