ionicons replace checkbox and radion buttons with icons

Question

I am using Ionicons on a project and have replaced the standard images for radio and checkbox with these icons.The issue I have is the actual default items are showing through the Ionicons when rendered.

I have the following HTML:

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

I also have the following 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;
}

But although the checkboxes/radio buttons behave correctly, I can see the standard item below the ionicon. Is this due to the icon having a transparent background?

I tried changing opacity to 100% but it did not help.

score 1 · Accepted Answer · answered Mar 29 '16 at 07:13

I have created the custom checkbox and by using the same concept you can create the radio button as well. For now I have created the normal (color change) checkbox but you can customize it as per your own requirements. Please follow the below mentioned link:

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

ionicons replace checkbox and radion buttons with icons

1 Answers1