CODEWITHSUNDEEP
htmlcss
Neo-coder
Neo-coder

Reputation: 7840

Hide text after div using css

Here is my 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>

I want to hide this show and entries text how should I hide this using css? Not using javascript or jquery.

Upvotes: 1

Views: 965

Answers (5)

Abhitalks
Abhitalks

Reputation: 28387

Despite so many answers and comments, you don't seem to be ready to accept the fact that the text needs to be wrapped in span. And that too using only css!

So, you can do a faux hide like this: http://jsfiddle.net/abhitalks/R7Yt4/1/

CSS:

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

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

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

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

.someClass {
  display: none; 
}

Tried this? I am sure this would do it!

Where it would be this: 

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

I thought you wanted to hide whole of it!

Upvotes: 3

Karthick Kumar
Karthick Kumar

Reputation: 2361

<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>

Upvotes: 0

Jochem Kuijpers
Jochem Kuijpers

Reputation: 1797

Try this:

<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>

With CSS:

span.hidden {
    display: none;
}

Upvotes: 2

Kristof Feys
Kristof Feys

Reputation: 1842

You can warp a span around the items you want to hide, and the hide this. For example

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

and css:

.hide{display:none;}

Your full html will look like this:

<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>

Upvotes: 0

Related Questions