css - CSS、条件付きでスタイルを有効にする

Question

私は自分の Web サイトで作業しているので、JavaScript が無効になっていても見た目も動作もほぼ同じです。JavaScript が有効になっている場合、INPUT タグと TEXTAREA タグがあります。マウスを INPUT にフォーカスすると、TEXTAREA スタイルはdisplay: blockからdisplay: noneになります。ユーザーが INPUT タグにフォーカスしているかどうかを CSS で確認し、TEXTAREA タグにいくつかのスタイルを適用する方法はありますか?

Answer 1

textareaはいよりも後にある場合は、textbox使用できます+ adjacent selector

textarea {
    display: none;
}

input[type=text]:focus + textarea { 
/* Switching styles for textarea when textbox is focused*/
    display: block;
}

デモ

注：input[type=text]特定の要素を選択するためにクラスを追加します。そうしないと、上記のセレクターがすべてtextareaの input[type=text]要素をトリガーします

Answer 2

はい、疑似クラス を使用して CSS で実行できます。 :focus
の 例

Answer 3

adjacent selector次のように使用できます。

JSFiddleデモ

HTML:

Click on the text input
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>

CSS

input[type=text]:focus {border:1px solid red; }
textarea { display:none; }
input[type=text]:focus + textarea {display:block; }

ただし、テキストエリアが表示されたときに実際にクリックしてフォーカスすることはできません。