Скрыть или удалить часть содержимого HTML-элемент с помощью CSS

Question

Проблемы

Я не могу изменить путь в whcih ниже HTML выводится, но мне нужно, чтобы изменить способ, в котором отображается его , Я знаю, что могу достичь желаемых результатов с jQuery, но я хотел бы сделать это с чистым CSS возможным?

Что именно мне нужно сделать

Мне нужно, чтобы показать input из приведенного ниже HTML, но сам label является излишним. Тег может оставаться или уходить, я не беспокоюсь об этом, но Username и <br> нужно уйти.

Очевидно, я не могу использовать label[for="user_login"]{ display: none; }, так как это не удастся, потому что оно скроет все в селекторе.

Оригинальный HTML

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

Нужный HTML-

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

JQuery подход

$(document).ready(function(){ 

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

    username_label.html(username_input); 

}); 

Почему я не хочу использовать jQuery

Подходящий логин для отображения отображается по-разному в зависимости от размера экрана. На небольших устройствах я запрашиваю ярлыки скрытые (чтобы сэкономить место), а на больших экранах ярлык все равно должен быть видимым. Используя подход jQuery, вы удалите метки в обоих случаях.

Хотя я знаю, что могу проверить экран в зависимости от нагрузки, а затем использовать событие resize (при необходимости), при изменении размера экрана (например, на планшете, с портретом на пейзаж) ярлыки могут быть удалены, а затем нет видимые, когда они должны быть.

Вопрос

Могу ли я достичь этого результата (или аналогичный) с чистым CSS?

Answer 1

Попробуйте CSS:

label { 
    visibility:collapse; 
} 

label input { 
    visibility: visible; 
} 

Вот jsfiddle: http://jsfiddle.net/entgqjzk/

Я изменил CSS я нашел на Hide text node in element, but not children

редактировать:

Это не удалите пробелы, как вы указали. я не могу придумать ничего лучше, чем комбинация JQuery и CSS, это не самый красивый код никогда, но он работает в этой ситуации, в которой вы не имеете контроля над HTML:

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

класс CSS «скрытой для мобильных» может быть использован, например, в сочетании с отдельной таблицей стилей для мобильных устройств (или псевдо-селекторов для различных размеров экрана)

Answer 2

вы пробовали классы псевдо? http://css-tricks.com/a-call-for-nth-everything/

Answer 3

Благодаря @geoffreydv за идею использования visibility.

В связи с этим я смог использовать CSS ниже, чтобы эффективно скрыть пробелы, занимаемые текстом внутри метки.

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