Issue with radio button styling when checked - html

Question

I have an issue with my radio buttons, I try to put a border color when it is checked, nothing happens. I tried to read other topics about it, even tried to paste the answers I've found but it still doesn't change the border.
It's probably some silly mistake that I made but I just can't find it, does anyone have the answer?
Thanks a lot.
input[type="radio"]:checked:before {
background: green;
}
input[type="radio"]:checked {
border-color: orange;
}
<div id="radio">
<label>
<input type="radio" name="sexe" value="Homme" id="homme">
Homme
</label>
<label>
<input type="radio" name="sexe" value="Femme" id="femme">
Femme
</label>
</div>

Answer 1

You can not really change the style of basic radio button.
You have to create a custom radio button css.
Try this css:
input[type='radio'] {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
outline: none;
border: 3px solid gray;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
}
input[type="radio"]:checked:before {
background: green;
}
input[type="radio"]:checked {
border-color: orange;
}
It works for me. I hope I can help.

Answer 2

Apparently, browsers don't allow much custom styling on checkboxes/radio buttons. - Jeremy Thille's comment
You could however, create your own radio button through css, an example of this can be found in this JsFiddle
What happens here:
We hide the borswer's radio input
We style create a custom radio button through css .checkmark
We show / hide a custom checked indicator using :checked, :after and the ~ General sibling combinator
Lastly, we style the checked indicator
Example found here
NOTE, as this is an example, it may be more than you require
The code
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
<label class="container">Homme
<input type="radio" checked="checked" name="sexe">
<span class="checkmark"></span>
</label>
<label class="container">Femme
<input type="radio" checked="checked" name="sexe">
<span class="checkmark"></span>
</label>
Hope this helps getting to your desired result