firefox モバイルにCSS 適用させたい

解決済 river
(@jpairb)

5年、 6ヶ月前

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件中)

ishitaka
(@ishitaka)

5年、 6ヶ月前
こんにちは

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' );
```
トピック投稿者 river
(@jpairb)

5年、 6ヶ月前

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

ishitaka
(@ishitaka)

5年、 6ヶ月前

.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 の前のドットが抜けていませんか？

トピック投稿者 river
(@jpairb)

5年、 6ヶ月前

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

4件の返信を表示中 - 1 - 4件目 (全4件中)

トピック「firefox モバイルにCSS 適用させたい」には新たに返信することはできません。

トピックタグ

表示