new_object_
楼主问的是静态的设置背景色还是选中了input后变色?如果是保持颜色则如楼上所述,通过选择器设置input的css样式即可:div input {
background-color: #abcdef;
}若为点击input后使其变色,则可以通过css的focus伪类为input设置背景色,具体代码如下:html>
This is a demo for background-color..box{
height: 44px;
width: 200px;
line-height:44px;
border: 1px solid #DCDCDC;
background-color: #fff;
/*设置渐变并添加多浏览器支持*/
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.content-input{
width:200px;
height:30px;
margin:auto auto;
border:none;
/*设置渐变并添加多浏览器支持*/
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.content-input:focus{
background-color:#30D2C4;
}
另外,通过js可以实现同样的效果,也可以实现校验文本框是否有内容进行变色,即有内容时变色,无内容时变回白色,代码如下:html>
This is a demo for background-color..active{
background-color:#30D2C4;
}
.box{
height: 44px;
width: 200px;
line-height:44px;
border: 1px solid #DCDCDC;
background-color: #fff;
/*设置渐变并添加多浏览器支持*/
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.content-input{
width:200px;
height:30px;
margin:auto auto;
border:none;
/*设置渐变并添加多浏览器支持*/
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
$('input').change(function(){
var this_input = $(this);
if ( this_input.val() != '' ){
this_input.addClass('active');
//this_input.parent().addClass('active');
}
else{
this_input.removeClass('active');
//this_input.parent().removeClass('active');
}
});