Change Selected Checkbox Background Color

[ad_1]

Through the below image, I have tried to explain my question.

I want to detect the checked state of the checkbox so I can set different background, border, and text colors.

[Elementor Checkbox](https://preview.redd.it/mz82d9vk6r4d1.png?width=1920&format=png&auto=webp&s=c541fdf9e1f07c5894ab41327d6931c4be29ae01)

Some code snippets, I have shown above which are working and which not.

Then also pasting here so you can show me correction:

.elementor-field-type-checkbox .elementor-field-option{
background: #eaebed;
border: 3px solid #071330;
border-radius: 5px;
max-width: 20% !important;
text-align: center;
margin: 20px !important;
padding:10px 5px !important;
color: #071330;
line-height: 30px;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}

.elementor-field-type-checkbox .elementor-field-option label{
font-family: “Montserrat”;
color: black !important;
}

.elementor-field-type-checkbox .elementor-field-option:hover{
background: #071330;
border: 3px solid #fca311;
}

.elementor-field-option input:checked ~ label {
color: white !important; /* Change text color when checked */
background: #071330; /* Change background-color color when checked */
/*border: 3px solid #fca311;*/
}

selector .elementor-field-option input:checked {
/*color: white !important; Change text color when checked */
background: #071330 !important; /* Change background-color color when checked */
border: 3px solid #fca311 !important;
}

I have tried different things but nothing worked and I was struggling for last 2 days for this.

After this I am posting my question here, I hope someone will help me for this.

Thanks for your given time.

[ad_2]