I managed to find the custom code such that the selected score is shaded in black. however, when i move on to the selection of response choice for the next question, the black shading disappears again

.Skin label.SingleAnswer:hover 
{background-color: #107da3 !important;
}
.LabelContainer:hover 
{
z-index:1 ;
transition:all 0.3s ;
transform:scale(1.2,1.2) ;
}

#QID2-1-label
{
background-color: #bd6158  ;
color: black;
}

#QID2-2-label
{
background-color: #c46758  ;
color: black;
}

#QID2-3-label
{
background-color: #cb6e58  ;
color: black;
}

#QID2-4-label
{
background-color: #d77b58  ;
color: black;
}

#QID2-5-label
{
background-color: #dd8358  ;
color: black;
}

#QID2-6-label
{
background-color: #e79257  ;
color: black;
}

#QID2-7-label
{
background-color: #fafa6e  ;
color: black;
}

#QID2-8-label
{
background-color:#eaf66f  ;
color: black;
}

#QID2-9-label
{
background-color: #9ee07b  ;
color: black;
}

#QID2-10-label
{
background-color: #83d681  ;
color: black;
}

.Skin label.SingleAnswer.q-checked.q-focused {
    color: #ffffff !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #000000 !important;
    background-color: #000000 !important;
}

Remove .q-focused from your last rule.

I encounter the selected choice highlights disappearing somehow because of the codes above when ive created different displays of colour, but the other questions are functioning as per expected behaviour.

1. on click it shows this

2. when i select the response choice for the next question, the border goes off again

@Jason Ling - I would have to see a survey preview to diagnose further.

Thank you Tom. Thanks for suggesting the survey preview link as the screenshots were definitely not easy to show what was happening.

https://shorturl.at/hntH2

@Jason Ling, 

Add this rule:

.Skin label.MultipleAnswer.q-checked, .Skin label.SingleAnswer.q-checked {
    box-shadow: 0 0 0 3px activeborder;
    outline: #a9bccc auto 5px;
}