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 */ } 

js fiddle demo.


Comments

Popular posts from this blog

ios - iPhone/iPad different view orientations in different views , and apple approval process -

java Extracting Zip file -

C# WinForm - loading screen -