CODEWITHSUNDEEP
focuscss
Anish Shah
Anish Shah

Reputation: 163

CSS highlight on focus

I am using border radius on an input field and when I select the field, it gets a border highlight as if there is no border radius i.e. the imaginary rectangle with sharp edges gets highlighted and not the real rounded corners one. Any cues on how to get the rounded rectangle highlighted? The border radius is functioning perfectly but on focus the highlight is not on the rounded corners.

<input class="filter" type="text" name = "Test1" value="Test1"> <!--HTML-->
.filter{border-radius:9px;} /*CSS*/

Upvotes: 2

Views: 12037

Answers (2)

SSR
SSR

Reputation: 6438

input[type=text], textarea {
 -webkit-transition: all 0.30s ease-in-out;
 -moz-transition: all 0.30s ease-in-out;
 -ms-transition: all 0.30s ease-in-out;
 -o-transition: all 0.30s ease-in-out;
 outline: none;
 padding: 3px 0px 3px 3px;
 margin: 5px 1px 3px 0px;
 border: 1px solid #DDDDDD;
}

input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

This works like a charm. you will get a good effect on focus

Upvotes: 0

David Thomas
David Thomas

Reputation: 253486

This is because outline doesn't respect (for whatever reason) border-radius, to emulate this it's easiest to 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.

Upvotes: 6

Related Questions