Onsen UI + Vue.js］v-ons-checkboxのスタイルについて

Question

v-ons-checkboxで、Checkedの場合のバックグラウンドカラーはどのように設定すればよいでしょうか？

利用しているver.は下記です。

onsenui: 2.4.2
vue-onsenui: 2.0.0

Answer 1

以下のOnsenUI Vue版の公式ドキュメントの動くサンプルをみてみると、CHECKBOXESの所でチェックボックスを選択した場合に青背景にレ点のマークが付きますが、CCSは以下のあたりが関係しているみたいです。

onsen-css-components.css

.checkbox__checkmark
:checked + .checkbox__checkmark:before
:checked + .checkbox__checkmark:after

v-ons-checkbox
詳細は、Chromeのデベロッパーツール等で、idがcheckbox-0のチェックボックスのスタイル等を確認してみてください。これにカスタマイズしたCSS定義を合わせると見た目を変化させられると思います。

Comments

[i-terashima]

ありがとうございます！
以下の記述で、バックグラウンドカラーと、枠線の色の変更もできました！

:checked+.checkbox__checkmark:before {
background-color: #111111;
border-color: #222222;
}