如何在使用输入时使用jquery更改表单背景颜色[type = text];

我知道我的标题我有点困惑，也许有人可以建议一个不同的。如何在使用输入时使用jquery更改表单背景颜色[type = text];

因此，无论如何，我正在学习一些Jquery，我希望它能够进行表单验证，然后我会显示代码然后问问题。

形式：

<form action="" method="POST"> 
    <ul> 
     <li> 
      <label for="market_1">Market: </label> 
      <input type="text" name="market_1" id="market_1" /> 
     </li> 
    </ul> 
</form>

JS：

$(document).ready(function() 
{ 
    $("#market_1").addClass("text_box_error"); 
});

CSS：

input[type="text"] 
{ 
    background-color: rgba(255, 255, 255, 0.5); 
    border: 1px solid #5B5B5B; 
    width: 148px; 
} 

input[type="text"]:hover, input[type="text"]:focus 
{ 
    background-color: rgba(255, 255, 255, 1); 
    border: 1px solid #5B5B5B; 
    font-weight: bold; 
} 
.text_box_error 
{ 
    background-color: red; 
}

目前，我只是试图让它来改变颜色，当我点击提交按钮。现在我可以得到这个工作，但当我使用input[type="text"]来设置输入框的样式时，我无法使它工作。

我认为这样做我可以风格所有的输入框相同，然后使用jquery addClass方法我可以覆盖背景颜色。

那么，为什么这不适合我向你展示的设置？

编辑：对不起，我更新了代码，并在这里粘贴了错误的版本，我没有更新代码。

来源

2013-03-26 ragebunny

是什么$（ “input_boxes”）给？ – hop 2013-03-26 14:42:54

对不起@hop这是我的错误，我已经更新了这个问题。 – ragebunny 2013-03-26 14:45:45

.input_boxes的原因是为它赋予input [type = text]的属性，看看它是否有效，但是我不明白它的差别。 – ragebunny 2013-03-26 14:46:36

这与selector specifity有关。

选择器input[type="text"]包含元素名称并引用属性，因此它具有0,0,1,1的特定性。

然而，选择器.text_box_error只包含一个（类）属性，因此它具有0,0,1,0的特定性 - 因此其background-color被具有较高特定性的另一个选择器覆盖。

只需使用input[type="text"].text_box_error作为选择器 - 这将具有0,0,2,1的特定性，并将为此胜出第一个选择器。

来源

2013-03-26 14:46:14 CBroe

完美！感谢很多朋友，我不知道一种做事方式可能比另一种做法更优先。我总是认为最后要执行的是覆盖的代码....猜测这有点简单。再次感谢你的帮助。 – ragebunny 2013-03-26 14:49:45

此选择器正在寻找类为input_boxes的元素，但在HTML中没有包含此类名的元素。

$(".input_boxes")

来源

2013-03-26 14:36:21

对不起，这是我的错误，我已经更新了这个问题。 – ragebunny 2013-03-26 14:44:53

你的CSS更改为：

input[type="text"].text_box_error 
{ 
    background-color: red; 
} 

input[type="text"].text_box_error:hover 
{ 
    background-color: rgba(255, 0, 0, .5); 
}

，你可以正确的风格既当文本框中有一个错误，当它没有案件。

的jsfiddle这里：http://jsfiddle.net/5KjVC/

来源

2013-03-26 14:55:51

Doh！ CBroe速度更快！ – 2013-03-26 14:56:49

如何在使用输入时使用jquery更改表单背景颜色[type = text];

回答

相关问题