我有一個div內的文本輸入，當輸入具有焦點時，如何獲取div的背景以進行更改？

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

所以......基本上我有。我有一個div內的文本輸入，當輸入具有焦點時，如何獲取div的背景以進行更改？

我有一個div的背景是一回事，但我想改變它時，輸入獲得焦點...像改變背景圖像爲以前相同的圖像，但在右邊的X用於清除文本字段。

我該如何做CSS？（只是背景切換）

來源

2011-08-06 NullVoxPopuli

那麼，你不能像'輸入'是'div'的孩子。爲什麼不用'input'使用某種疊加元素？ – BoltClock

如果你已經在網站上使用jQuery，你應該使用它。否則，請告訴我，我會寫出一個儘可能接近沒有JavaScript的答案。 – thirtydot

不能觸發互動元素的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/

來源

2011-08-06 16:16:43 AlienWebguy

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

來源

2011-08-06 16:03:31 nkcmr

這會影響'輸入'，而不是'div'，假設'input'具有該ID。 – BoltClock

你不能用純CSS做到這一點。使用javascript-jquery方式：$("#yourInput").focus(function(){$(this).parent().addClass("focused")})或者在輸入中添加填充或邊框，並在輸入本身設置背景圖片，如果您想要堅持純CSS。您可能需要更改圖像，以僞造輸入外觀。

來源

2011-08-06 16:18:59 Litek

另一種方法。用純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。

來源

2011-08-07 16:43:28 Litek

我有一個div內的文本輸入，當輸入具有焦點時，如何獲取div的背景以進行更改？

回答

相關問題