在另一个跨度中更改输入焦点上跨度的颜色

当另一个跨度中的输入字段关注时，需要使用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

在另一个跨度中更改输入焦点上跨度的颜色

回答

相关问题