选择文本字段时更改标签颜色

Question

我是联系表单，我想在用户选择文本字段时更改标签颜色。问题是更改发生在下一个标签上。例如：如果我选择textbox1，它应该更改label1颜色。但在我的情况下，它改变label2颜色。

请查看实际网站：
https://dl.dropboxusercontent.com/u/35853519/Contact/contact.html

form input[type="text"]:focus
{
    border: 2px solid #5187c4;
}

input:focus + label
{
    color: red;
}

谢谢，

Answer 1

这可以通过javascript实现，因为没有＆＃34;以前的兄弟＃34;选择器在css。

您可以使用以下jquery代码

JS：

    $('form input[type="text"], form textarea').focus(function() {
      $("label[for='" + this.id + "']").addClass("labelfocus");
    }).blur(function() {
      $("label.labelfocus").removeClass("labelfocus");
    });

CSS：

.labelfocus{ color:red; }

Answer 2

我不确定你现在正在做什么来让这个工作，因为你没有发布任何代码，但也许尝试给你的标签id，然后用JavaScript改变他们的风格？

例如：

<form>
   <label for="name" id="name-label">Your name</label>
   <input type="text" id="name" onclick="changeColor();">
</form>

<script>
    function changeColor() {
        var myLabel = document.getElementById("name-label");
        myLabel.style.color = "red";
    }
</script>

这只是一个非常快速的模型，真正的代码会更复杂。例如，您必须支持多个条目/标签对，并且当您单击其他输入表单时，您必须将之前变为红色的标签再次变为黑色;但这不应该太糟糕。

Answer 3

没有“上一个兄弟”选择器。您可能必须使用JQuery或Javascript ...

Selectors level 4将允许您选择选择器的前任兄弟。

如果您想使用JQuery ......

试试这个：

$('form input').focus(function () {
    $(this).parent().addClass('red');
}).blur(function () {
    $(this).parent().removeClass('red');
});

Answer 4

你正在使用相邻的兄弟选择器（+），它只选择紧随其后的子节点。这与您期望的行为相反，即选择前面的元素。

不幸的是CSS中有no such selector，我想不出一个好的和简单的解决方案。除非你当然可以使用 JavaScript 。

另一种方法可能是交换输入框和标签的位置，以便标签后面跟着每个输入框。这当然会弄乱您的格式，因此您需要重新定位标签以使它们再次位于输入字段之上。