Unable to hide focus outline of checkbox

I am adding this in case anyone else is looking for similar functionality. I wanted the checkbox to be invisible since I have it placed on a custom image. After customizing the styling and setting the styles to be 'no color', I was still seeing the focus outline. This focus outline would disappear after clicking the checkbox but I needed it to be gone always. I was able to get an invisible yet functional checkbox with this custom CSS:

.widget-checkbox label:before {
border: none
}