Question

问题

我无法改变输出HTML的方式，但我确实需要修改它的显示方式。我知道我可以使用jQuery达到我想要的结果，但我想用纯CSS来做到这一点吗？

我到底需要做什么

我需要在下面的HTML中显示input，但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/

我修改了我在Hide text node in element, but not children

找到的css

修改

这不会删除您指示的空格。我不能提出比jQuery和css更好的东西，它不是有史以来最漂亮的代码，但它确实适用于你无法控制html的情况：

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

css类“hidden-for-mobile”可以用作例如移动设备的单独样式表（或用于不同屏幕尺寸的伪选择器）

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

使用CSS隐藏或删除HTML元素的部分内容

3 个答案: