Question

<div class="contain">
 <input type="text">
</div>

所以...基本上我拥有的东西。

我有一个div的背景是一件事，但我想在输入获得焦点时改变它...比如将图像的背景更改为与之前相同的图像，但右边有一个X清除文本字段。

我如何使用CSS？（只是后台切换）

Answer 1

只需使用CSS，就无法触发元素与其他元素交互时的CSS更改。

这是一个简单的JQuery解决方案，可以实现您的目标：

$('input').focus(function(){
    $(this).parent().addClass('focused');
}).blur(function(){
    $(this).parent().removeClass('focused');
});

工作演示1（带背景颜色）：http://jsfiddle.net/AlienWebguy/V2hub/

工作演示2（带背景图片）：http://jsfiddle.net/AlienWebguy/V2hub/1/

Answer 2

你不能用纯css做到这一点。要么使用javascript - jquery方式：$("#yourInput").focus(function(){$(this).parent().addClass("focused")})，要么在输入中添加填充或边框，如果要坚持纯css，请在输入本身设置背景图像。您可能需要更改图像，以伪造输入外观。

Answer 3

#element:focus { background:url(img.png); }

更多信息：http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-20.html

Answer 4

另一种方法。用纯css。起初我正在考虑使用伪元素，但看起来伪元素与输入元素不相符。所以我没有使用像input:focus:after这样不起作用的东西（至少在firefox中），而是使用了简单的div。

.contain { position:relative; }
input:focus + div { position: absolute; top:0; left:0; width:100%; height:100%: z-index:-1; background: red; }

Fiddle

我在div中有一个文本输入，当输入有焦点时，如何让div的背景改变？

4 个答案: