CODEWITHSUNDEEP
htmlcsscheckboxsass
Retros
Retros

Reputation: 3611

Checkbox doesn't check inside data-component=""

I'm making this checkbox list and everything works great until i place it inside this div and wrap the scss in it:

<div data-component="modal"></div>
[data-component='modal'] {styling goes here}

Outside of that in css, it checks great. Can someone tell me what is going on?

Also, the reason it's called modal, it's because this checkbox is inside a modal. And at first I thought the modal was messing things up, but it works great. The issue is in scss, for some reason.

Here's the codepen.

Upvotes: 0

Views: 51

Answers (2)

Berkay Yaylacı
Berkay Yaylacı

Reputation: 4513

Actually it works, you are overriding the check icon with background you can test by deleting or changing this line background: #fff;.

Maybe something like this ? 

.custom-control-input:checked~.custom-control-indicator{
  background: radial-gradient(circle at center, #1062a4 .6ex, white .7ex);
}

Hope helps,

Upvotes: 2

Saurav Jamwal
Saurav Jamwal

Reputation: 374

The Problem is you have given

background: #fff;

in .custom-checkbox .custom-control-indicator {

that's why tick is not shown.

Remove that and check it again.

Upvotes: 2

Related Questions