在输入焦点上更改标签背景颜色

因此，我试图更改包含输入项目标签的表td元素的背景颜色。输入项本身位于该行的以下td元素中。我试图在输入项目的焦点上强制这个背景颜色变化。以下是我编码的内容。目前尚未开展工作。在输入焦点上更改标签背景颜色

$(".input_field").child("input").focus(function() { 
    $(this).parent("td").sibling("td").css("background","#cf4f92"); 
}); 

<tr> 
    <td class="label_name"><label for="email">Email</label></td> 
    <td class="input_field"><input type="text" name="email" maxlength="28" /></td> 
</tr> 

td.label_name { 
    background:#dc95ba; 
    color:#fff; 
    font-size:16px; font-weight:bold; line-height:16px; 
    padding:2px; 
    text-align:right; text-transform:uppercase; 
} 
td.label_name label { 
    margin:0 10px; 
    max-width:150px; width:auto; 
} 
td.input_field { 
    margin:0; padding:0; 
} 
td.input_field input { 
    border:1px solid #dc95ba; 
    color:#e1a4c4; 
    font-weight:bold; 
    margin:0 0 0 -2px; padding:2px 2px 2px 10px; 
    width:200px; 
} 
td.input_field input:focus { 
    border:1px solid #cf4f92; 
}

来源

2012-12-17 rmbX66t1

解决方案在这里。 http://jsfiddle.net/J9bWE/1/

我在tr上添加了一个类。

<tr class="EntryRow"> 
    <td class="label_name"><label for="email">Email</label></td> 
    <td class="input_field"><input type="text" name="email" maxlength="28" /></td> 
</tr>

就拿我没怎么叫TR

$(".input_field input").focus(function() { 
    $(this).closest(".EntryRow").find(".label_name").css("background","#cf4f92"); 
});

来源

2012-12-17 03:26:14

完美的作品，谢谢！ – rmbX66t1

欢迎！很高兴听到:)只是将它标记为答案:) –

尝试。它的作品

$(".input_field > input").focus(function() { 
    $(this).closest("tr").children("td:first").css("background","#cf4f92"); 
});

来源

2012-12-17 03:37:50 kjana83

在输入焦点上更改标签背景颜色

回答

相关问题