样式化离子复选框

Question

I had the style below for ion-checkbox that I used in ionic 3. I want to use the same style in ionic 4 checkbox:

 .ion-checkbox .ion-checkbox-icon {
 border-radius: 2px;
 position: relative;
 width: 50px;
 height: 50px;
 border-color: #dedede;
 background-color: #ffffff;
 }

 .ion-checkbox .ion-checkbox-checked .ion-checkbox-inner {
 left: 16px;
 top: 5px;
 position: absolute;
 width: 14px;
 height: 27px;
 border-color: #427feb;
 border-top-width: 0;
 border-right-width: 4px;
 border-bottom-width: 4px;
 border-left-width: 0;
 }

 .ion-checkbox-md .ion-checkbox-checked {
 border-color: #fafafb;
 background-color: #f9f9f9;
}

The style doesn't work in ionic 4. What am I missing?

Answer 1

Try reinstall the latest ionic. It worked for me.

npm i -g ionic@latest

Answer 2

I had to reference ion-checkbox as an element rather than class.

Here is what worked for me;

ion-checkbox {
  background: #ffffff;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 4px;
  border-color: grey !important;
  --height: 35px;
  --width: 35px;
  --checkmark-color: #4870f2;
  --background-checked: #ffffff;
  --border-color: #ffffff;
  --border-color-checked: #ffffff;
}

More details on custom properties can be found here from the official documentation.