html div选中变色,css里我们选中一个div里的一个input设置背景色

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');

}

});

3

0