在另一個跨度中更改輸入焦點上跨度的顏色

當另一個跨度中的輸入字段關注時，需要使用css更改跨度的背景顏色。在另一個跨度中更改輸入焦點上跨度的顏色

<p class="some"> 
<span class="one">Name</span> 
<span class="two"> <input type="text" name="fname"> </span> 
</p>

這裏是CSS：

.one 
{ background-color: red; }

我試着這樣做：

.two:focus + .one 
{background-color-black;}

，但它不工作。

任何幫助，將不勝感激。謝謝！

來源

2015-10-30 Sumaiya

你不能這樣做的CSS。 – Alex

如果你想改變'.two'的顏色，你可以修改你的html結構。 – Alex

您只能選擇一個相鄰的兄弟姐妹，而不是之前。所以你不能把'one'作爲'two'的兄弟，但是你可以把'two'作爲'one'的兄弟。另外，'.two'這個類在這裏沒有提到輸入框，它指的是'span'，它不是聚焦的東西。這需要JavaScript。 – davidpauljunior

使用Javascript：

HTML：

<p class="some"> 
<span class="one">Name</span> 
<span class="two"> <input type="text" name="fname" onfocus="changeColor()"> </span> 
</p>

的Javascript：

<script type="text/javascript"> 
function changeColor() { 
    document.getElementsByClassName("one")[0].style.backgroundColor="black"; 
} 
</script>

的CSS：

.one 
{ background-color: red; }

來源

2015-10-30 09:42:06 Assassin

-1

如果你不介意的元素順序，試試這個片斷：

.one { float: left; } 
 
input[name="fname"] { margin: 0 0 0 5px; } 
 
input[name="fname"]:focus + .one { background: khaki; }

<p class="some"> 
 
    <input type="text" name="fname"/> 
 
    <span class="one">Name</span> 
 
</p>

這裏是一個fiddle

來源

2015-10-30 09:46:12

另一個JavaScript溶液，使用類，並且還處理輸入失去焦點：

function getFocus() { 
 
    var one = document.getElementsByClassName("one")[0]; 
 
    one.className = one.className + " one-focused"; 
 
} 
 

 
function looseFocus() { 
 
    var one = document.getElementsByClassName("one")[0]; 
 
    one.className = one.className.replace("one-focused", ""); 
 
}

.one { background-color: red; } 
 
.one-focused { background-color: black; }

<p class="some"> 
 
<span class="one">Name</span> 
 
<span class="two"> <input type="text" name="fname" onfocus="getFocus()" onblur="looseFocus()"> </span> 
 
</p>

這有一些相當明顯的缺陷，但在這種情況下工作。你可能想循環遍歷所有的類，或者使用id而不是類。如果你使用的是jQuery，那麼這會變得稍微簡單一些，但是我已經使用標準的javascript離開了它，只改變了文檔中第一個元素的背景。

來源

2015-10-30 10:01:40 zelanix

在另一個跨度中更改輸入焦點上跨度的顏色

回答

相關問題