Подсветка CSS в фокусе

Question

Я использую радиус границы в поле ввода, и когда я выбираю поле, он получает выделение границы, как будто нет граничного радиуса, т. Е. Воображаемый прямоугольник с острыми краями подсвечивается, а не реальные закругленные углы один. Любые подсказки о том, как выделить округленный прямоугольник? Радиус границы работает отлично, но при фокусировке подсветка не на закругленных углах.

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

Answer 1

Это потому, что outline не уважает (по любой причине) border-radius, чтобы эмулировать это простой в использовании 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.

Answer 2

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); 
} 

Это работает как шарм. вы получите хорошее влияние на фокус