4 
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <style>
            form:focus{
                background:red;
            }
        </style>
        <title>Home, sweet home</title>
    </head>
    <body>
        <form>
            <input type="text"/>
            <input type="submit"/>
        </form>
        <form>
            <input type="text"/>
            <input type="submit"/>
        </form>
        <form>
            <input type="text"/>
            <input type="submit"/>
        </form>
    </body>
</html>

私が質問している理由として、これは明らかに機能しません。強調表示するフォーカスとして入力が含まれているフォームを取得するにはどうすればよいですか？つまり、アクティブなINPUTではなくアクティブなFORMにスタイルを適用できるようにしたいのですが、JSなどがなくても実行できますか？

4

6 に答える 6

9

これは古い質問ですが、現在、より人気のあるブラウザのいくつかは:focus-within、フォーカスされた入力を持つフォーム（javascriptなし）のスタイルを設定できる、と呼ばれるcss疑似セレクターをサポートしています。

セレクターの現在のサポートは次のとおりです。http： //caniuse.com/#search=focus-within

サポートされているブラウザを使用している場合は、次の例をご覧ください：https ://codepen.io/jumprope-design/pen/LjxORX

于 2017-08-06T18:41:42.780 に答える
3

CSSには親セレクターがないため、javascriptが必要です。ただし、CSS4はこの機能を取得する予定です。

于 2012-06-23T02:53:02.613 に答える
3

このコードは演習として機能しますしかし、おそらくあなたが使うべき解決策ではありません。依存しているバージョンはlegend実際には許容できるようです。

form:focusセレクターがないので、代わりに個人input:focusが疑似要素を使用して目的の効果を作成できると思いました。ただし、疑似要素は、次のように置き換える場合のように、コンテンツを含む要素でのみ使用できます。input[type=submit]button

form {
    position:relative;
}
/*style the pseudo-element before a button that is a general sibling
  of any element that currently has focus within a form*/
form *:focus~button:before{
    content:"";display:block;background:red;
    /*take up the entire space of the form*/
    position:absolute;top:0;right:0;bottom:0;left:0;
    /*but render behind its children*/
    z-index:-1;
}

いじくり回しましたが、すぐにかなりクレイジーに見えたので、要素に依存するようlegendにソリューションをリファクタリングしました。楽しみ ：）

于 2012-06-23T05:12:07.487 に答える
2

私はしばらくの間、同じスタイリングテクニックを探していました。UI / UXの観点から-検索フォームを単一の要素に単純化することは、特定の状況では非常に理にかなっています。

以下の例を考えてみましょう。

検索フォームの例

開発の観点からアプローチする場合、ひざまずくのは、入力要素ではなくフォーム自体のスタイルを決定することです。左側に透明なinput[type= text]、右側に透明な.PNG送信ボタンがあり、シャープな検索フィールドがあります。

ただし、ご存知のとおり、入力フィールドは背景や色などを制御するフィールドではなく、フォーム要素が代わりに使用されるため、：focusに関連付けられたCSSスタイル機能を放棄します。

form：focusセレクターはそれを処理するのに最適な方法です。残念ながら、そのためにはCSS4を待つ必要があります（tid-bitのmatt3141に感謝します）。

それまでの間、いくつかのオプションをご利用いただけます

オプション1-クリック可能な送信ボタンを使用しない

私は通常、可能であればこれを避けようとしますが、送信ボタンを完全に放棄するオプションがあります。意図したとおりにテキストフィールドのスタイルを設定し、位置を左またはフィールドの右に制限した背景画像を使用します。ユーザーがクエリを入力してEnterキーを押した場合でも、GETアクションを実行できます。上の画像の例では、この手法を使用しています。

例：http ：//designdisease.com/

長所：セットアップが最も簡単です。

欠点：検索ボタンをクリックしたままのユーザーは混乱する可能性があります。

オプション2-代替要素を使用して背景のスタイルを設定する

次のオプションは、ovが以前の回答で寛大に説明したように、兄弟セレクターとコンテンツタグを利用することです。これは、エフェクトで新しい要素を追加し、：focusエフェクトが入力フィールドに適用されたときに、指定された領域の新しい背景として機能するようにスタイルを設定します。

例： http： //jsfiddle.net/ovfiddle/PEK7h/2/

長所：複数のフィールドを持つより大きなフォームに簡単に拡張できます。

欠点：集中的なセレクターは、私たちが望むほど優雅に劣化しない可能性があります。

オプション3-絶対ポジショニングを使用して要素をスタックする

テキストフィールドがフォームの全幅を含む状況では、position：absolute;を使用できます。属性を入力要素の上に送信ボタンをロードし、ボタンをいくつかcssで微調整して背景/境界線を削除します。上記の例の画像と同じ効果がありますが、クリック可能にするという利点があります。

ステップ1：フォームに相対/絶対/固定の位置を指定します。

ステップ2：テキストフィールドの幅を100％にします。

ステップ3：ボタンに絶対位置を指定し、正しい位置を0にします。

新しいテクニックを組み込むためにovのフィドルを更新しました：

例： http： //jsfiddle.net/PEK7h/17/

Pro's：優雅に劣化し、ほとんどの単一入力フィールドの場合に必要なものを提供します。

欠点：ovの修正のように大きなフォームに簡単に拡張することはできません。

-

ご覧のとおり、各オプションには独自の欠点がありますが、事前に知っていれば、通常はその影響を軽減できます。お役に立てれば！

于 2012-08-17T19:59:13.150 に答える
0

JSがないと、ページに複数のフォームがある場合、レンダラーはスタイルシートとフォームをリンクできません。それを行う最良の方法は、フォーム名/ IDを持ち、フォームがフォーカスを取得したときにスタイルシートを適用するJavaScriptを持っていることです。

于 2012-06-23T02:58:48.187 に答える
0

フォームに「焦点を合わせる」ことはできません。CSSを使用して、フォーム内のフォーム要素（編集可能で有効になっている）にのみ「焦点を合わせる」ことができます。お役に立てれば。

于 2012-06-23T03:10:54.633 に答える