.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 - 不会改变...这里我在写东西 - 因为你看我的代码不够,你需要上来>
答案 0 :(得分: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>
请尝试用英语而不是任何其他语言发布您的问题。
答案 1 :(得分:1)
这是可行的解决方案:
.connection-field:focus {
outline: none;
color: #2196f3;
border:1px solid red;
}
Please check this CodePen link
快乐编码:)
答案 2 :(得分:1)
--只需添加 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 */
}