Radio Button Checked – Color change

Hi,

I am currently struggeling to edit contact form 7. The radio button should be one color when its “blank” and another color when you hover over them and press them. When I hover over my radio buttons it becomes the color I have choosen but beside the original button. And when I choose it, it does not change color.

Here is the codesnippet I have used:

input[type=radio] {
display: 0;
}

.wpcf7-radio label span.wpcf7-list-item-label:before {
	content: '' !important;
border: px solid #dbdbdb !Important;
border-radius: 2px !Important;
cursor: pointer !Important;
display: inline-block !important;
height: 49px !important;
position: relative !Important;
top: 0 !important;
margin-left: 20px !important;
margin-top: -15px !Important;
width: 48px !important; 
background-color:blueviolet;
}

.wpcf7-radio label span.wpcf7-list-item-label:hover {
	content: '' !important;
border: px solid #dbdbdb !Important;
border-radius: 2px !Important;
cursor: pointer !Important;
display: inline-block !important;
height: 49px !important;
position: relative !Important;
top: 0 !important;
margin-left: 20px !important;
margin-top: -15px !Important;
width: 48px !important; 
background-color:green; 
}

Appreciate all help!