在输入焦点上更改标签背景颜色 [英] Change Label Background Colour on Input Focus

问题描述

所以，我试图改变一个table td元素的背景颜色，它包含输入项目的标签。输入项本身位于该行的以下td元素中。我试图在输入项目的焦点上强制这个背景颜色变化。以下是我编码的内容。

  $（。input_field）。child（input）。focus（函数（）{
 $（this）.parent（td）。sibling（td）。css（background，＃cf4f92）; 
}）; 
 
< tr> 
< td class =label_name>< label for =email>电子邮件< / label>< / td> 
< td class =input_field>< input type =textname =emailmaxlength =28/>< / td> 
< / tr> 
 
 td.label_name {
 background：＃dc95ba; 
颜色：#fff; 
 font-size：16px;字体重量：粗体;线高度：16px的; 
 padding：2px; 
 text-align：right;文本转换：大写; 
} 
 td.label_name标签{
 margin：0 10px; 
 max-width：150px;宽度：汽车; 
} 
 td.input_field {
 margin：0;填充：0; 
} 
 td.input_field input {
 border：1px solid＃dc95ba; 
颜色：＃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; 
} 
  

解决方案

试试这个。它工作

  $（。input_field> input）。focus（function（）{
 $（this ）.closest（tr）。children（td：first）.css（background，＃cf4f92）; 
}）; 
  

So, I'm trying to change the background colour of a table td element, which contains the label for an input item. The input item, itself, is located in the following td element in the row. I am trying to force this background colour change on the focus of the input item. Below is what I have coded, thus far. It is failing to work at this point.

$(".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;
}

解决方案

try this. It works

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

这篇关于在输入焦点上更改标签背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！