css3 - CSS highlight on focus -
i using border radius on input field , when select field, gets border highlight if there no border radius i.e. imaginary rectangle sharp edges gets highlighted , not real rounded corners one. cues on how rounded rectangle highlighted? border radius functioning on focus highlight not on rounded corners.
<input class="filter" type="text" name = "test1" value="test1"> <!--html--> .filter{border-radius:9px;} /*css*/
this because outline doesn't respect (for whatever reason) border-radius, emulate it's easiest use box-shadow:
.filter { padding: 0.4em; outline: none; border-radius: 9px; } .filter:focus { box-shadow: 0 0 0 2px #f90; /* or whatever colour you'd prefer */ }
Comments
Post a Comment