Hide or remove part of the content of an HTML element using CSS

Question

The problem

I cannot alter the way in whcih the HTML below is output, but I do need to amend the way in which it is displayed. I know I can achieve my desired results with jQuery, but I'd like to do it with pure CSS possible?

What exactly I need to do

I need to show the input from the HTML below, but the label itself is superfluous. The tag can stay or go, I'm not bothered by that, but Username and <br> need to be gone.

Obviousely I cannot use label[for="user_login"]{ display: none; }, as this will fail because it will hide everything within the selector.

The original HTML

<label for="user_login">
    Username
    <br>
    <input id="user_login" class="input" type="text" size="20" value="" name="log">
</label>

The desired HTML

<label for="user_login">
    <input id="user_login" class="input" type="text" size="20" value="" name="log">
</label>

jQuery approach

$(document).ready(function(){

    var username_label = $('label[for="user_login"]'),
        username_input = username_label.find('input');

    username_label.html(username_input);

});

Why I don't want to use jQuery

The login for in question is displayed differently depending on screen size. On smaller devices I requre the labels hidden (to save space), while on larger screens the label should still be visible. Using the jQuery approach will remove the labels in both cases.

While I know I can check the screen widht on load, and then use resize event (if necessary), should the screen size change (on a tablet, portrait to landscape for example) the labels could be removed and then not visible when they need to be.

Question

Can I achieve this result (or similar) with pure CSS?

Answer 1

Try this css:

label {
    visibility:collapse;
}

label input {
    visibility: visible; 
}

Here is a jsfiddle: http://jsfiddle.net/entgqjzk/

I modified the css I found at Hide text node in element, but not children

edit:

This doesn't remove the whitespace as you indicated. I can't come up with anything better than a combination of jQuery and css, it's not the most beautiful code ever but it does work for this situation in which you don't have control over the html:

http://jsfiddle.net/entgqjzk/2/

The css class "hidden-for-mobile" could be used for example combined with a seperate stylesheet for mobile devices (or pseudo selectors for different screen sizes)

Answer 2

Have you tried pseudo classes? http://css-tricks.com/a-call-for-nth-everything/

Answer 3

Thanks to @geoffreydv for the idea of using visibility.

In conjunction with that, I was able to use the CSS below to effectively hide the whitespace occuped by the text within the label.

body.login #loginform label[for="user_login"],
body.login #loginform label[for="user_pass"]{
    display:        inline-block;
    height:         50px;
    position:       relative;
    visibility:     collapse;
    width:          300px;
}

body.login #loginform input#user_login,
body.login #loginform input#user_pass{
    margin:         0;
    position:       absolute;
    top:            0;
    visibility:     visible;
    width:          300px;
}