Annoying border on react carbon focus Chrome

Issue

I am using Carbon React and i cannot figure out how to remove that annoying blue border on focusing on a checkbox. I know that outline: none is the solution, but I cannot find on which attribute/element I should put it. Even on Storybook of Carbon (http://react.carbondesignsystem.com/?path=/story/checkbox--checked) there is same issue when clicking on a Checkbox component. (only on Chrome)

Solution

Just add the following style

.bx--checkbox:focus+.bx--checkbox-label::before, .bx--checkbox-label__focus::before, .bx--checkbox:checked:focus+.bx--checkbox-label::before, .bx--checkbox-label[data-contained-checkbox-state='true'].bx--checkbox-label__focus::before, .bx--checkbox:indeterminate:focus+.bx--checkbox-label::before, .bx--checkbox-label[data-contained-checkbox-state='mixed'].bx--checkbox-label__focus::before {
  border: 0
}

you might wanna change border style if removed all then you will not able to detect checkbox.

Answered By - Arshpreet Wadehra