ボタンのCSSについて

[gundam]

lightning proを使用しています。

input type=”submit”の時と同じスタイルを
input type=”button”でも反映させたいのですが、
どうも、反映されません。

追加CSSもしくは、子テーマCSSに
input type=”submit”のCSSと同じ内容を
書き足すか、
input type=”submit”のCSSにtype=”button”を付け足すか

いろいろ調べてみましたが
CSSがどこにあるのかが、わかりませんでした。
どの辺りにあるのでしょうか？
もしくは、もっと別な方法はあるのでしょうか？

[DRILL LANCER]

下記記事を参考に自力で探すよりないと思われます。

全てのWordPressテーマで使える！デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

ちなみに、このサイトの button や submit には大抵 btn btn-primary が ついています。
これらのクラスはBootstrap で定義されたものです。
https://getbootstrap.com/docs/3.4/css/#buttons

[石川＠Vektor,Inc.]

補足です。

<input type=”submit” class="btn btn-primary">

で概ねいけるかと思います。

超初心者のためのWordPressのサイトのデザインの微調整方法 from Hidekazu Ishikawa

[DRILL LANCER]

さらに言うと、<input type="submit">対しては、lightning.min.jsにおいて下記記述があります。
jQuery('input[type=submit]').addClass("btn btn-primary");

これによって<input type="submit">が<input type="submit" class="btn btn-primary">に書き換わるようになっています。

<input type="button">にも同様のことをしたい場合下記手順を行うと良いでしょう。

1. Simple Custom CSS and JSをインストールして有効化
2. Custom CSS & JS > Add Custom JS と進む
3. コメントの部分を削除して下記コードを入力して保存（右側の設定はご自由に）
4. ありとあらゆるキャッシュを削除（サーバー & プラグイン & ブラウザ etc…）

jQuery(document).ready(function( $ ){
	$('input:button').addClass("btn btn-primary");
});

[DRILL LANCER]

補足します。jQuery で class をつけたり削除したりする際は下記記事が参考になると思います。

jQueryでclassを追加したり削除する〜addClass,removeClass,toggleClass

[gundam]

おはようございます。
プラグインを入れて上記コードを入れて、すんなり、思い通りに表示されました。
いつもいつも皆さま
ありがとうございます。

また、補足での、jQuery で class をつけたり削除したりする。
も、今後の役に立たせるよう、勉強に励みます。

ありがとうございました。

[投稿者]

投稿