2

У меня есть css для input но при фокусе видно заостренные углы синего цвета. Как их сделать по краям поля ввода?

#UsersPassword {
  width: 300px;
  font-size: 13px;
  padding: 6px 0 4px 10px;
  border: 1px solid #cecece;
  background: #F6F6f6;
  border-radius: 8px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="D:\ВЛАД\Projects VisualStudio\Repositories\Сайты\MyWebSite\style.css" />
  <script src="script.js"></script>
</head>

<body>
  <input type="text" id="UsersPassword">
</body>

</html>

1

1 ответ 1

6

Синяя обводка при фокусе задаётся свойством outline. К сожалению, на него не действует border-radius, поэтому нужно просто менять цвет границы, а outline отключать.

#users-password {
  width: 300px;
  font-size: 13px;
  padding: 6px 0 4px 10px;
  border: 1px solid #cecece;
  background: #F6F6f6;
  border-radius: 8px;
}
#users-password:focus{
  outline:none;
  border-color:#2196F3;
}
<input id="users-password" />

2
  • Отлично, спасибо!
    – aquaprogit
    5 окт 2018 в 11:23
  • 1
    Там опечатка в слове "действует"
    – aquaprogit
    5 окт 2018 в 11:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.