html - CSS:为同级触发样式

所以我有一个输入字段和一个像这样的按钮：

<span class="btn-wrapper">
    <input type="text" id="mytextfield">
    <button type="submit" id="mysubmitbutton">Go</button>
</span>

我想要的是，当用户专注于mytextfield时，我想为mytextfield和mysubmitbutton添加边框。

我已经尝试过了，但是失败了：

#mytextfield:focus + #mysubmitbutton{
border-color:solid 1px red;
}

谢谢

最佳答案

您有两个问题：


您正在将border速记语法与border-color属性一起使用
您需要选择两个元素，而不仅仅是按钮。


这样：

#mytextfield:focus,
#mytextfield:focus + #mysubmitbutton{
    border:solid 1px red;
}

这是检查这个的小提琴：
http://jsfiddle.net/za4EW/

关于html - CSS:为同级触发样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18145551/