Styling ion-checkbox

Ionic Framework
1

I Hello,
I had the style below for ion-checkbox that I have used in ionic 3. I want to use to style 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 doing wrong.

ion-checkbox
ion-checkbox.png708×539 36.3 KB

img: Properties of checkbox in chrome.

I have also tried using hydated and interactive as class names. It didn’t work

2

I’m stuck on the same problem as well. I can’t get check mark to be bigger. Did you check the v4 docs?

This is not very helpful when you’ve to change the size (stroke-width) of the check mark itself. Let me know how it goes. Mean while i’ll try to use yours and see if I can get a work around.

3

Meanwhile, I tried more hit and trial and got my checkbox to work. I’m pretty sure yours old css is not going to work, so save yourself some time and try tweaking on this.

       ion-checkbox{
       background: #FFFFFF;
        border-width: 1px !important;
        border-style: solid !important;
        border-radius: 4px;
        border-color : blue !important;
        --height : 25px;
        --width: 25px;
        --checkmark-color:blue;
        --background-checked: #FFFFFF;
        --border-color: #FFFFFF;
        --border-color-checked :#FFFFFF;
      }

Note, i’ve used some other properties along with given parameters from doc, BECAUSE IT DIDN"T WORK and had to hit and trail with other values until I got the checkbox the way i wanted.
Let me know if you find anything else.
Cheers.

4 Likes
4

Thanks a lot.
This worked for me. I first landed on documentation page but i didn’t understand the double hyphen syntax and how it’s applied in css.

5

true that, a quick question, have you ever tried tweaking the css for search bar in v4? I came across the same problem again, can’t change the border radius of search bar.
Just asking if you’ve come across it, or else no pressure :slight_smile:

6

yeah I have a search bar in my project but didn’t try tweaking. You scaring me in advance:thinking:

7

luckily even got that figured out, the solution is lame… but works…

put these stuff in global.scss

.searchbar-input {
  border-radius: 5px !important;
  height: 45px !important;
  box-shadow: none !important;
}

.searchbar-input.sc-ion-searchbar-md{
  border: 1px solid #dadada;
}
1 Like
8

Thanks , it works for me