サポート » 使い方全般 » firefox モバイルにCSS 適用させたい

  • 解決済 river

    (@jpairb)


    firefox のアンドロイド版(V62.03)へのCSS適用についてです。
    firefoxのメールフォームのチェックボックスの囲み線の色がかなり薄いため以下AのようなCSSを適用させたいのですが、うまくいきません。
    A: .mw_wp_form input[type=”checkbox”]{outline: 1px solid #000000 !important; }
    B: @-moz-document url-prefix() {  }

    Bを使うと、PCには効きますが、モバイルに変化がありません。
    Bを使わずAだけだと、モバイルにも効きますが、他のブラウズの表示がおかしくなるのでfirefoxのみに適応させたいです。

    firefox のアンドロイド版限定(PCを含めてもいい)でCSSを効かせる方法があれば教えていただけませんでしょうか。

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

    body タグに、専用のクラスを追加する方法はどうでしょうか。
    下記コードを functions.php に追加すると、Firefox ブラウザの場合、body タグのクラスに “firefox” クラスが追加されます。

    function my_body_class( $classes ){
    	$agent = getenv( 'HTTP_USER_AGENT' );
    	if ( preg_match( '/Firefox/', $agent ) ) {
    		$classes[] = 'firefox';
    	}
    	return $classes;
    }
    add_filter( 'body_class', 'my_body_class' );

    さっそくのご返信ありがとうございました。
    基本的な質問で申し訳ございません。
    firefoxの場合、firefoxというクラスがbodyに追加されるということですね。
    これに質問のCSSを適用したい場合は以下では間違っているでしょうか。functions.php追加の後、やってみて変化がなかったのですが。
    .firefox mw_wp_form input[type=”checkbox”] {outline: 1px solid #000000 !important; }

    .firefox mw_wp_form input[type=”checkbox”] {outline: 1px solid #000000 !important; }

    .firefox .mw_wp_form input[type=”checkbox”] {outline: 1px solid #000000 !important; }

    mw_wp_form の前のドットが抜けていませんか?

    ご指摘の通りでできました。
    教えていただいたもので、メディアクエリでモバイル用にしたところ、希望の通りになりました。
    ご丁寧にご回答いただき、ありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「firefox モバイルにCSS 適用させたい」には新たに返信することはできません。