質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Q&A

解決済

2回答

1294閲覧

OnsenUIのcheckboxを丸から四角にしたい

todayyy

総合スコア31

checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

0グッド

0クリップ

投稿2020/07/22 19:14

実現させたい事

onsen uiにあるデフォルトのons-checkboxの丸から四角のcheckboxにしたい

イメージ説明

該当のソースコード

html

1<ons-page id="second-page"> 2 3 <label class="checkbox"> 4 <input type="checkbox" class="checkbox__input" checked="checked"> 5 <div class="checkbox__checkmark"></div> 6 ON 7 </label> 8 9</ons-page>

cssでいろいろと記述すると思いonsenuiのonsen-css-components.cssをいろいろといじってみたのですが、css初心者ですので理解ができず上手くいきませんでした。

チェックしている時もそうなんですが、この丸い枠線はどのクラスで適用させているのかがさっぱり分かりませんでした。
ご回答よろしくお願いします!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

下記のCSSを追加してみてください。

css

1.checkbox__checkmark:before { 2 border-radius: 0; 3}

どのクラスに適用されているかを確認するには、デベロッパーツールを使うと簡単です。
Chromeなら、下記を参考に。

Google Chromeデベロッパーツールとは?使い方や簡易的な解析テクニックについてご紹介します! | SEO研究所サクラサクラボ

CSSを記述する場所ですが、他の方からも指摘がありますが、onsen-css-components.css に追加するはNGです。バージョンアップした場合、上書きされて消えてしまいますので。

独自のスタイルシートファイルに記述して、それを onsen-css-components.css の後で読み込むようにします。あるいは、HTMLに直接記述してもいいでしょう。

投稿2020/07/23 00:56

編集2020/07/23 02:48
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

todayyy

2020/07/23 04:54

回答ありがとうございます! 他にもいろいろとアドバイスありがとうございます。デペロッパーツールは動作テストでconsole.logを出力する時ぐらいにしか使用していなかったのでcss関連でも使えるよう頑張ります。 大変勉強になりました。
guest

0

まず前提として、onsen-css-components.cssを変更するのはオススメしません。
想定外の修正がされてしまう可能性があるからです。
慣れないうちは触らない方が良いです。

自分で.cssファイルを生成して、その中にスタイルを記述してください。

補足として、OnsenUIのcssが優先して適用されてしまう場合があります。
その場合、cssに「!important」を記述してください。

css

1color : red !important;

投稿2020/07/23 01:57

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

todayyy

2020/07/23 04:48

回答ありがとうございます。 omponets.cssからコピペして自分のcssファイルにて記述する方法もあるということですね。 !importantは初めて聞きました。教えてくださりありがとうございます!
退会済みユーザー

退会済みユーザー

2020/07/23 07:31

基本的に、components.css等のフレームワークは触らないです。 私としてはコピペも触っているのと同義なのでNGです。 開発者ツールで適用されているcssを見ながら修正するのがいいです。 開発者ツール上に書いて試すことも可能ですので。
todayyy

2020/07/23 10:00

なるほど。今度から触らないようにします! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問