web-dev-qa-db-ja.com

とにかく、ラベルを：focusCSSに応答させる

ラベルにフォーカスに反応させる方法はありますか？テキストフィールドのフォーカスのスタイルが異なるコードがいくつかあります。ただし、ラベルには少し異なるスタイルも必要です。これを試しましたが、ラベルには影響しませんでした。

#header .search label {
    background:url(http://www.golfbrowser.com/images/icons/search.png) left top no-repeat;
    padding-left:20px;
    height:20px;
    float:right;
}
#header .search label:focus {
    background:url(http://www.golfbrowser.com/images/icons/search-z.png) left top no-repeat;
    padding-left:20px;
    height:20px;
    float:right;
}
#header .search input {
    padding:0px;
    border:0px;
    width:140px;
    height:20px;
    float:left;
    padding-right:10px;
    background:url(http://www.golfbrowser.com/images/icons/searchbar.png) right top no-repeat;
}
#header .search input:focus {
    padding:0px;
    width:190px;
    height:20px;
    float:left;
    padding-right:10px;
    background:url(http://www.golfbrowser.com/images/icons/searchbar-z.png) right top no-repeat;
}

ラベルには画像と丸い角の他の部分が含まれており、フィールドが正しく表示されるようにするには、ラベルの色も変更する必要があります。

何か案は、

素晴らしい

cssfocuslabel
17
RIK

実際にラベルに焦点を当てることはできません。フォーカス可能なフォーム要素ではありません。その上、たとえあなたができたそれをしたとしても、以前に焦点を合わせていたもの（つまりあなたの入力）はとにかくそれをラベルに失うでしょう。

input:focusを選択してからその入力の対応するラベルを選択できるように、HTMLを再構築する（そしてそれに応じてCSSを変更する）必要がある場合があります。たとえば、入力後にラベルを移動し、ラベルに次のCSSセレクターを使用した場合、目的を達成できるはずです。

#header .search input:focus + label
27
BoltClock

BoltClockの答えは、この機能を実現するためのよりセマンティックで軽量な方法です。ただし、特定のHTML構造を持つことが常に可能であるとは限らず（特にこのようなマイナーな機能を容易にするため）、CSSにはHTML階層をトラバースする機能がありません。それを回避するために、ここに2つの選択肢があります。 1つ目はまもなく登場し（CSS仕様4）、2つ目は古い仲間のJavascriptです。

まず、CSS4の:focus-within疑似セレクターです。これは、缶に書かれていることを正確に実行します（子要素のアクティブフォーカス状態に基づくスコープ）。仕様の詳細を読む ここ 。したがって、次のHTML構造があると仮定します。

<div class="input-wrapper">
    <label for="elem">Label Text
      <input name="elem" id="elem" type="text" />
    </label>
</div>

次の方法で、「focused」ラベルのスコープを設定できます。

label:focus-within{}

同じように、次のように親divのスコープを設定することもできます。

div.input-wrapper:focus-within{}

魔法の。しかし、今日は使用しないでください:(

次に、すでにJSセレクターエンジン（jQuery、Sizzleなど）を使用している場合は、次のようにすることもできます。

$('input').on("focus", function(){
  var input = $(this);
  // assuming label is the parent, i.e. <label><input /></label>
  var label = $(this).parent();
  label.addClass('focussed');
  input.on("blur", function(){
    label.removeClass('focussed');
    input.off("blur");
  });
});

これはuntestedですが、これが達成することの本質は、:focus疑似セレクターではなくクラスを使用することです。したがって、フォーカスされたスタイルをlabel.focussed{}に追加できます。クラスの削除を容易にするために、ぼかしハンドラーを追加（および自己削除）しました。

9
milehighsi