html中怎么设置input的背景颜⾊,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;
html内容文本框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{
veClass('active');
/
/this_input.parent().removeClass('active');
} });

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。