CODEWITHSUNDEEP
htmlcss
Mohammed
Mohammed

Reputation: 1

Change background color of UIkit checkbox

Question:

How can I change the color of an UIkit icon? Specifically, I want to change the background color of the check box icon.

Here's a link to the UIkit Form documentation.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/css/uikit.min.css" />
<input style="color:red" class="uk-checkbox" type="checkbox">

I want to change the color of the background.

Upvotes: 0

Views: 2124

Answers (1)

Ylama
Ylama

Reputation: 2489

input.uk-checkbox {
background-color: red;
}

input.uk-checkbox:checked {
background-color: red;
}

input.uk-checkbox:checked:focus {
background-color: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/css/uikit.min.css" />
<input class="uk-checkbox" type="checkbox">

Because the UIkit applies styling using their framework you wil have to overwrite.

So they use .uk-checkbox {background-color: red;}, just target from the input as above , input.uk-checkbox {background-color: red;}.

Upvotes: 2

Related Questions