CODEWITHSUNDEEP
htmlcss
максим
максим

Reputation: 21

border-color does not change on focus

enter image description here

.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>

The color of the input frame does not change when: focus ... border-color - does not change ... here I am writing something - because you see my code is not enough and you need to come up

Upvotes: 2

Views: 1401

Answers (3)

Oualid Sahnoun
Oualid Sahnoun

Reputation: 36

--Just add outline: none and you're write border not border-color or write 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 */
            }

Upvotes: 1

Rashed Rahat
Rashed Rahat

Reputation: 2479

Here is the working solution:

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

Please check this CodePen link

Happy coding :)

Upvotes: 1

Udhay Titus
Udhay Titus

Reputation: 5869

add outline:none; and border for on focus. It will be works.

.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>

Please try to post your question in English not any other language.

Upvotes: 1

Related Questions