サポート » プラグイン » Contact form7の「選択されていません」の文字色を変えたい

  • はじめまして。

    Contact form 7でファイル添付タグを使ってフォームを使っています。

    ファイル添付は、ファイル添付ボタンの隣に最初は「選択されていません」とメッセージが出ていて、ファイル添付ボタンを押してファイル添付を行うと、「選択されていません」の文字が選択した「ファイル名」に切り替わります。

    この「選択されていません」や「ファイル名」の文字の色が白な為、背景色の白と同化して見えない為、ここの文字色だけ変更したいです。

    しかし、デベロッパーツールで調べたクラス名やファイル添付タグを生成する際に付けたクラス名にCSSを指定しても、文字色は変わりません。

    どうしたら、この部分のクラス名やID名がわかるでしょうか?
    もしお時間がありましたら、教えて頂けますと大変助かります。

    どうぞよろしくお願い致します。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • こんにちは

    クラス名やIDはデベロッパーツールで調べたものが正しいと思います。

    変更した CSS ファイルがキャッシュによって正しく読み込まれていないか、CSS の詳細度が足りない(他の CSS に負けている)のではないでしょうか。

    どのデペロッパーツールをお使いでしょうか?
    おかしいな、と思った時は、別のブラウザのデベロッパーツールでも確認するといいですよ。
    私はFirefoxをメインにしていますが、正しいclass名を取得できない場合は
    Chromeのツールでも試しています。
    ツール上で背景色を変更して正しく反映されているのか確認してみてください。
    もう既にお試しでしたらすみません。

    テーマまたは動作を確認できるサイトの URL をお知らせいただくと解決が早いかもです。

    みなさん、回答いただきありがとうございます!
    無事に文字色が変更できました。
    ただ…実は1サイト上でフォームがフロントページとお問い合わせページの二箇所にあり、それぞれ背景色が違うため、一方を白文字、もう一方を黒文字にしたいです。

    でも、デベロッパーツールで得られたクラス名div.wpcf7 input[type=”file”]にCSSをかけると両方とも同じ文字色になってしまいます。

    Contact Form7でフォームを2つ作り、それぞれのファイル添付タグに別の名前のクラス名をつけて、そのクラス名にCSSをかけても「選択されていません」の文字色には適用されませんでした。

    この「選択されていません」の文字色をページごとに変えることは不可能なんでしょうか?

    body タグのクラスには、ホームページ(home)や投稿 ID(postid-123)、ページ ID(page-id-123)などのクラスが付加されるので、これでセレクトするといいかと思います。

    ホームページの例:
    .home div.wpcf7 input[type="file"] { color: red; }

    ID が 123 の固定ページの例:
    .page-id-123 div.wpcf7 input[type="file"] { color: blue; }

    CG

    (@du-bist-der-lenz)

    文字色をページごとに変えることは、出来ます。手順は同じことです。ページIDで、条件分岐しましょう。

    なお、クラスはテーマやプラグインによっては、追加されなかったりするので、実際のページのソースを確認してみてください。

    ありがとうございました。
    有力情報をいただき、すごく参考になりました!

    ただ、ページID↓で指定してみたのですが、効かなかったです。

    .home div.wpcf7 input[type="file"]{
    	color: black;
    }
    .page-id-39 div.wpcf7 input[type="file"]{
    	color: black;
    }

    実際に書き込んでも効かないですが、Chromeのデベロッパーツールでこれを打ち込んでもグレーアウトしちゃいます。

    そもそも、Chromeのデベロッパーツールでここのクラス名にスタイルを指定しようとすると

    div.wpcf7 input[type="file"] {
        cursor: pointer;
    }

    と書いてあるんです。

    クラス名なら.が必要だし、IDなら#が必要なはずですよね?
    でも、頭に何もつけずにいきなりdivから始まるんですよ。
    そして、Chromeのデベロッパーツールによれば、先にcursor: pointer;というプロパティが入っているらしいんですが、このプロパティが入っているところが、私自身が書いたファイルじゃなくてwp-includes/css/styles.css?ver=5.1.4と表示されています。テーマフォルダしかいじったことがないので完全にお手上げです。

    • この返信は3 週間、 3 日前に  saeka さんが編集しました。

    クラス名なら.が必要だし、IDなら#が必要なはずですよね?
    でも、頭に何もつけずにいきなりdivから始まるんですよ

    div はタグ(要素)です。タグはタグ名(要素名)でセレクト(要素型セレクタ)します。

    ページID↓で指定してみたのですが、効かなかったです。

    .page-id-39 div.wpcf7 input[type="file"]{
    	color: black;
    }

    .page-id-39 を付けると効かないということであれば、ブラウザのキャッシュとかでなければ、.page-id-39 が違うということになると思いますが・・・ちょっと分かりません。
    動作を確認できるサイトの URL を教えていただくことは可能でしょうか?

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • このトピックに返信するにはログインが必要です。