67

Webサイトのログインページで作業していますが、テキストボックスにフォーカスが移ったときに、入力ボックスの前に表示されるラベルを太字にします。現在、次のマークアップがあります。

<label for="username">Username:</label>
<input type="textbox" id="username" />

<label for="password">Password:</label>
<input type="textbox" id="password" />

隣接するセレクターを使用してテキストボックスの後のラベルを選択できますが、その前の要素を選択できません。このCSSセレクタールールを使用できますが、ラベルが選択されるのは後だけなので、ユーザー名のテキストボックスにフォーカスが移ると、パスワードのラベルが太字になります。

input:focus + label {font-weight: bold}

この作品を作るために私にできることはありますか？JavaScriptを使用してこれを簡単に実行できることは知っていますが、可能であれば純粋なCSSベースのソリューションを使用したいので、それを実行する方法がわかりません。

4

5 に答える 5

38

CSS Selectors 4 Specは、を使用してセレクターの「サブジェクト」を定義するための構文を提供します!。2016年初頭の時点では、これはどのブラウザでも利用できません。ブラウザがこの構文を実装すると、純粋なCSSを使用してこれを行う正しい方法になるため、これを含めています。

質問のマークアップを考えると

<label for="username">Username:</label>
<input type="textbox" id="username" />

<label for="password">Password:</label>
<input type="textbox" id="password" />

このCSSでうまくいきます。

label:has(+ input:focus) {font-weight: bold}

もちろん、これは、ブラウザーが実際にサブジェクトセレクターを実装し、この構文が:focus疑似クラスでどのように機能するかに関連するバグがないことを前提としています。

于 2012-07-25T17:14:58.800 に答える
24

inputが の前にある場合は、「隣接する兄弟セレクター」を使用できますlabel。のinput前にlabelを配置し、レイアウトを変更して のlabel前に配置しinputます。次に例を示します。

<head runat="server">
    <title></title>
    <style type="text/css">
    input:focus + label {font-weight: bold}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="direction:rtl">
        <input type="text" id="username" />
        <label for="username">Username:</label>
    </div>
    <div style="direction:rtl">
        <input type="password" id="password" />
        <label for="password">Password:</label>
    </div>
    </form>
</body>

（これは一種のハックです。私は個人的にこれを行うためにjavascriptを使用します）

input:focus + label {font-weight: bold}
<form id="form1" runat="server">
  <div style="direction:rtl">
    <input type="text" id="username" />
    <label for="username">Username:</label>
  </div>
  <div style="direction:rtl">
    <input type="password" id="password" />
    <label for="password">Password:</label>
  </div>
</form>

于 2009-01-29T18:39:52.177 に答える
8

CSSを使用して前の要素を提供するセレクターはありません。

あなたはあなたが求めているものを処理するためにjavascriptを使用する必要があります。

于 2009-01-29T18:30:12.260 に答える
5

このセレクターを使用します。

label[for=username]
{
font-weight: bold
}

これにより、属性「for」に値「username」を持つラベルが選択されます

于 2009-01-29T18:35:29.003 に答える
5

入力要素を右にフローティングすると、direction:rtl で取得したラベル テキストの「ユーザー名」と「:」の順序を変更せずに、正しい要素順序が実現されます。

<style type="text/css">
    form {text-align: right;}
    input:focus + label {font-weight: bold}
    input {float:right; clear:right;}
</style>
<form>
    <div>
        <input type="text" id="username" />
        <label for="username">Username:</label>
    </div>
    <div>
        <input type="password" id="password" />
        <label for="password">Password:</label>
    </div>
</form>
于 2009-01-29T19:58:43.313 に答える