边框颜色在焦点上不会改变

Question

.form-field {
  position: relative;
  width: 370px;
  height: 40px;
  margin-left: 40px;
  margin-bottom: 30px;
}
.label {
  position: absolute;
  margin-left: 42px;
  margin-top: 12px;
  width: 58px;
  height: 16px;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: #757575;
}
.connection-field {
  padding-left: 42px;
  width: 370px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(33, 33, 33, 0.2);
}
 .connection-field:focus {
   color: #2196f3;
   border-color: 1px solid red;
}

<div class="form-field">
<label class="label" for="user_name">Имя</label>
<input class="connection-field" type="text" name="Имя"id="user_name">
<svg class="modal-icon-1">
<use xlink:href="#modal-icon-1"></use>
</svg>
</input>
</div>

输入框的颜色在以下情况下不会改变：focus ... border-color - 不会改变...这里我在写东西 - 因为你看我的代码不够，你需要上来

Answer 1

添加 outline:none; 和 border 以获得焦点。它会起作用。

.form-field {
  position: relative;
  width: 370px;
  height: 40px;
  margin-left: 40px;
  margin-bottom: 30px;
}
.label {
  position: absolute;
  margin-left: 42px;
  margin-top: 12px;
  width: 58px;
  height: 16px;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: #757575;
}
.connection-field {
  padding-left: 42px;
  width: 370px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(33, 33, 33, 0.2);
}
 .connection-field:focus {
   outline: none !important;
   color: #2196f3;
   border:1px solid red;
    box-shadow: 0 0 10px #f00; /*--optional--*/
}

<div class="form-field">
<label class="label" for="user_name">Имя</label>
<input class="connection-field" type="text" name="Имя"id="user_name">
<svg class="modal-icon-1">
<use xlink:href="#modal-icon-1"></use>
</svg>
</input>
</div>

请尝试用英语而不是任何其他语言发布您的问题。

Answer 2

这是可行的解决方案：

 .connection-field:focus {
   outline: none;
   color: #2196f3;
   border:1px solid red;
}

Please check this CodePen link

快乐编码:)

Answer 3

--只需添加 outline: none 并且您写的是 border 而不是 border-color 或写的是 border-color: red 。

              .form-field {
                position: relative;
                width: 370px;
                height: 40px;
                margin-left: 40px;
                margin-bottom: 30px;
            }
            .label {
                position: absolute;
                margin-left: 42px;
                margin-top: 12px;
                width: 58px;
                height: 16px;
                font-size: 14px;
                line-height: 16px;
                letter-spacing: 0.01em;
                color: #757575;
            }
            .connection-field {
                padding-left: 42px;
                width: 370px;
                height: 40px;
                border-radius: 4px;
                border: 1px solid rgba(33, 33, 33, 0.2);
                outline: none; /*here add outline: none*/
                
            }
            .connection-field:focus {
                color: #2196f3;
                border: 1px solid red; /* here write border not border-color */
            }