带有自定义框阴影和焦点指示器的奇怪边框

Question

I made sample with two number inputs with custom outline and box-shadow. In Google Chrome I see strange black-gray border after focus on bottom input element.

For this input I use

                  .shadowBox:focus {
                    outline: 1px black dotted !important;
                    box-shadow: 1px 1px grey;                    
                  }   

If I set box-shadow: none this strange border doesn`t appear. What I do wrong?

EDITED . Why this "strange border" appears on 'focus' if I use box-shadow? This border exists only in Google Chrome, but not in Mozilla Firefox.

Answer 1

If you want to have both, the dotted outline And border solid you can have this instead:

.shadowBox:focus {
  outline: 1px dotted black;
  border: 2px black solid;
}