0

プロジェクトで使用Ioniconsしており、ラジオとチェックボックスの標準画像をこれらのアイコンに置き換えました。問題は、レンダリング時に実際のデフォルト項目が Ionicons を介して表示されることです。

私は次のHTMLを持っています:

<input type="checkbox"
       name="client{!!  $client->uuid !!}"
       class="checkbox-icon ion-android-checkbox-outline-blank" checked>

次のCSSもあります。

.checkbox-icon:before,
.radio-icon:before {
  visibility: visible;
  font-size: 20px;
}

.checkbox-icon.ion-android-checkbox-outline-blank:checked:before {
  content: "\f374";     // icon for selected
  font-size: 20px;
  color: $brand-primary;
}

.radio-icon.ion-ios-circle-outline:checked:before {
  content: "\f120";     // icon for selected
  font-size: 20px;
  color: $brand-primary;
}

input[type=checkbox].checkbox-icon.ion-android-checkbox-blank,
input[type=radio].radio-icon.ion-record {
  visibility: hidden;
}

しかし、チェックボックス/ラジオ ボタンは正しく動作しますが、イオコンの下に標準アイテムが表示されます。アイコンの背景が透明だからでしょうか？

不透明度を 100% に変更しようとしましたが、役に立ちませんでした。

4

1 に答える 1

1

私はカスタムを作成しましたがcheckbox、同じコンセプトを使用してカスタムを作成することもできますradio button。今のところ、通常の (色の変更) チェックボックスを作成しましたが、必要に応じてカスタマイズできます。以下のリンクに従ってください。

URL: https://jsfiddle.net/qq92vbcm/

于 2016-03-29T07:13:35.243 に答える