Old question now, but this might be relevant for somebody with a similar issue. I had an input field with rounded border
and wanted to change colour of focus outline. I couldn’t tame the horrid square outline to the input control.
So instead, I used box-shadow
. I actually preferred the smooth look of the shadow, but the shadow can be hardened to simulate a rounded outline:
input, input:focus { border: none; border-radius: 2pt; box-shadow: 0 0 0 1pt grey; outline: none; transition: .1s; } /* Smooth outline with box-shadow: */ .text1:focus { box-shadow: 0 0 3pt 2pt cornflowerblue; } /* Hard "outline" with box-shadow: */ .text2:focus { box-shadow: 0 0 0 2pt red; }
<input class="text1"> <br> <br> <input type=text class="text2">