更改背景顏色單獨

我試圖一旦輸入點擊被我用來改變輸入持有人的背景顏色，這些更改背景顏色單獨

<div class="name"> <input type="text" class="input-name"></div>

CSS

.input-name:focus + .name{ 
background:#f00; 
}

這是怎麼了通常 enter image description here

這就是我要的焦點 enter image description here

但它不會工作

來源

2014-10-27 Chrys Ugwu

的[？是否有一個CSS選擇器的父（可能重複http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector） – 2014-10-27 16:29:20

您無法使用CSS選擇父元素。

但是，你可以用一個盒子類似的假東西的影子

body { 
 
    margin: 25px; /* not required */ 
 
} 
 

 
.input-name:focus { 
 
    box-shadow:0 0 0 10px red; 
 
}

<div class="name"> 
 
    <input type="text" class="input-name" /> 
 
</div>

來源

2014-10-27 16:34:07

不幸的是，你不能選擇與CSS父。

Is there a CSS parent selector?

這將不得不通過腳本來完成。

(function() { 
    var inputs = document.getElementsByClassName('input-name'); 
    if(!(inputs && inputs.length)) return; 

    function toggleRed(elem) { 
     elem.classList.toggle('red'); 
    } 

    for(var i=0; i < inputs.length; i++) { 
     var input = inputs[i]; 

     // focus 
     input.addEventListener('focus', function() { 
      toggleRed(this.parentElement); 
     }); 

     // blur 
     input.addEventListener('blur', function() { 
      toggleRed(this.parentElement); 
     }); 
    } 
})();

檢查本作演示

http://jsfiddle.net/andyw_/6ec1efs2/1/

來源

2014-10-27 16:34:15

如何添加更多類到它試圖這個var inputs = document.getElementsByClassName（'input-name'，'input-email'，'input -通過'）; – 2014-10-27 17:10:54

理想情況下，您可以爲那些意味着具有相同效果的元素（即class =「js-redhover」）使用一個類。如果您確實需要選擇多個類，那麼您只需使用'document.getElementsByClassName'選擇其他類並將結果連接在一起https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat – 2014-10-27 17:18:36

對不起，沒有幫助你可以爲我做一些改變 – 2014-10-27 17:57:15

當你想要確切的事情不能做，@Paulie_D的回答是最接近純CSS。

要做剛好你想要什麼，你需要使用JavaScript，因爲如前所述，你不能選擇一個父元素。

這裏的JavaScript：

function myFunction() { 
document.getElementById("name").style.background = "red";

}

和HTML：

<div id="name> 
<input type="text" id="input" onfocus="myFunction()">

來源

2014-10-27 16:43:46

更改背景顏色單獨

回答

相關問題