ボタンのCSSについて

VWSとは フォーラム Lightning ボタンのCSSについて

ボタンのCSSについて

  • このトピックには5件の返信、3人の参加者があり、最後にgundamにより4年、 8ヶ月前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #17520

    gundam
    参加者

    lightning proを使用しています。

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

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

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

    #17523

    DRILL LANCER
    モデレーター

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

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

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

    #17526

    補足です。

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

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

    #17532

    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");
    });
    #17533

    DRILL LANCER
    モデレーター

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

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

    #17534

    gundam
    参加者

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

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

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

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