Закругление углов в текстовом поле html5, которое использует заполнитель

Question

Привет, я создаю форму входа, которая использует местозаполнитель html5.

<form name="login" id="LoginForm" action="#" method="post">
  <input type="text" placeholder="Username" name="username"/>
  <br/><br/>
  <input type="password" placeholder="Password" name="password"/>
  <br/><br/>
  <input type="submit" name="submit" value="Login"/>
</form>

Я также использовал css3 border-radius: 6px ;.Однако, когда я нажимаю на текстовое поле, хотя углы закруглены, выделение вокруг текстового поля все еще имеет углы.Кто-нибудь знает работу вокруг?

Answer 1

Вы можете скрыть outline

input {
    outline: 0;
}

Тем не менее, это очень важная функция доступности, поэтому рекомендуется предоставлять альтернативные стили для фокуса (например, придать ему фон, изменить цвет текста и т. Д.)