入力フォームにフォーカスを当てたときに背景色を変更したい。

CSSファイルに、
input:focus.focus｛background-color:red;｝
と入力し、それを参照して入力フォームの背景を変更しようとしました。
（このCSSファイルには他にもたくさんのコードが書かれております。）

更新しても反映されなかったので、コードが間違っているのかと思い、
input:focus.focus｛background-color:red;｝
を単体でCSSファイルにし、それを参照するためだけのHTMLファイルも作りました。
その結果、後者は入力フォームの色が変わりました。

どちらもIEで開きましたが、原因が何か教えて頂けると嬉しいです。
必要な情報が抜けているなどございましたらご連絡下さい。
当方勉強を始めて2週間の新参でございます。

以上、宜しくお願い致します。

行動規範の内容に同意します

回答4件

ブラウザ (Firefox, chrome) の開発者ツールを使うと
画面上の要素にどんな CSS の設定が適用されているのか、どんなイベントハンドラーが設定されていrのか
を調べることができます。
(mac で作業しているので IE の開発者ツールではどうなのか不明)

参考：

Chromeデベロッパー・ツールの機能 http://www.buildinsider.net/web/chromedevtools/01

このページ中で "イベント" を検索すると、要素にわりあてられているハンドラーを調べる方法がわかります。

投稿2015/04/20 21:53

katoy

総合スコア22324

kent.t

2015/04/20 23:53

回答ありがとうございます。 Windowsを使用しておりますが、確認してみます。

行動規範の内容に同意します

CSSでは、同じスタイルが指定されている場合、最もセレクタのスコアが高い設定を適用するルールがあります。
簡単いうと、id属性は 100pt、タグ指定は 1pt、class 属性は 10pt となり、それぞれの合算値で比較することになります。

例：
body input.focus => body タグ (1pt) + input タグ (1pt) + focus クラス (10pt) => 12pt
input.focus => input タグ (1pt) + focus クラス (10pt) => 11pt
#hoge .focus => #hode (100pt) + focus (10pt) => 110pt

→ この場合、３つ目のスタイルが適用されることになります。

CSSが適用されないというのは、これとは別にスコアの高い設定がどこかに記載されているのかもしれません。

なお、important 属性が指定されている場合はこれらよりも優先して設定されます。
ただし、important 属性がお互いに設定されている場合は、important 属性がついている中で最もスコアが高い設定が利用されることになります。

下記のサイトにはもう少し詳しく書いてあります。
参考にしてみてはいかがでしょうか。
http://css-happylife.com/archives/2007/0113_2250.php

投稿2015/04/20 23:57

usk

総合スコア397

luckerさんが書かれている通り、CSSは後から記述した内容が優先されます。
下記のように記述して、背景が変わるようなら、CSSを記述した後に同じような記述をしている可能性が高いです。

input:focus.focus { background-color:red !important; }

redの後に!importantと記述することで、このスタイルが最優先で反映されます。
!importantを多用すると、何が優先されるかわからなくなるため、極力使わない方がよいです。

他の原因して、IEの互換モードで表示していると、背景が変わらないみたいなので、標準モードで表示しているか確認した方がよいかと思います。
表示モードに関しては、下記が参考になります。

参考：フォーカス時の背景色を指定する

投稿2015/04/20 13:22

退会済みユーザー

総合スコア0

kent.t

2015/04/20 15:28

最初の方とは別の要因を書いて頂きありがとうございます！非常に勉強になります！

行動規範の内容に同意します

そのコードの括弧が全角なのが投稿上の問題なのでしたら、以下を実行してみてください。

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">  
input:focus.focus{background-color:red;}
input:focus.focus{background-color:green;}
</style>  
    </head>
    <body>
        <div>
            <input type="text" class="focus">
        </div>
    </body>
</html>

focusすると何色に変わるでしょうか？

このようにCSSは、複数のスタイルが該当した場合、後に書かれたスタイルで上書きされます。

（このCSSファイルには他にもたくさんのコードが書かれております。）

ということですので、その他のスタイルがコンフリクトしていたのかもしれませんね。

では、こうするとどうでしょう？

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">  
input:focus.focus{background-color:red !important;}
input:focus.focus{background-color:green;}
</style>  
    </head>
    <body>
        <div>
            <input type="text" class="focus">
        </div>
    </body>
</html>

このあたりから解決されてみてはいかがでしょうか？

投稿2015/04/20 12:47

退会済みユーザー

総合スコア0