html - CSS: 兄弟のトリガー スタイル

Question

したがって、次のような入力フィールドとボタンがあります。

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

私が欲しいのは、ユーザーが に焦点を合わせたときに、と の両方にmytextfield境界線を追加したいということです。mytextfieldmysubmitbutton

私はこれを試しましたが、失敗します:

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

ありがとう

Answer 1

2 つの問題があります。

1. プロパティborderで短縮構文を使用していますborder-color
2. ボタンだけでなく、両方の要素を選択する必要があります。

そのような：

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

これをチェックするフィドルは次のとおりです。 http://jsfiddle.net/za4EW/

Answer 2

いくつかの問題があります。

まず、あなたの html が正しくありません。次のinputようにタグを閉じる必要があります。

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

そしてあなたのCSSは正しくありません、あなたが必要ですborder

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

これが機能するフィドルです：http://jsfiddle.net/LMTmM/