Materialze Цвет нижней границы ввода не меняется при фокусе - PullRequest
Новая
       84

Materialze Цвет нижней границы ввода не меняется при фокусе

0 голосов
/ 30 мая 2020

У меня есть следующие html: 

        <div class="centered">
          <form class="col">
            <input type="text" class="input-field"></input>
            <span class="helper-text">Email</span>
            <div className="button-wrapper">
              <button className="btn" type="submit">Submit</button>
            </div>
          </form>
        </div>

и следующие css: 

.input-field input[type=text]:focus {
  border-bottom: 1px solid #4ec632;
  box-shadow: 0 1px 0 0 #4ec632;
}

Нижний контур ввода, когда сфокусирован, все еще синий по умолчанию i sh цвет вместо зеленого # 4ec632. Я пробовал несколько решений и ссылался на документацию по материализации, но пока ничего не работает. Есть идеи, что мне попробовать?

Ответы [ 2 ]

1 голос
/ 30 мая 2020

Я изменил ваш CSS селектор, чтобы он менял стиль, когда поле ввода находится в фокусе. Я также изменил границу и ширину тени на 10 пикселей, чтобы они были очевидны.

Для вашей информации вы можете изменить контур вместо границы. Только контур может применяться ко всему элементу и не может изменять только нижнюю часть контура.

enter image description here

/*.input-field input[type=text]:focus {*/
input[type=text].input-field:focus {
  border-bottom: 10px solid #4ec632;
  box-shadow: 0 10px 0 0 #4ec632;
}
<div class="centered">
          <form class="col">
            <input type="text" class="input-field"></input>
            <span class="helper-text">Email</span>
            <div className="button-wrapper">
              <button className="btn" type="submit">Submit</button>
            </div>
          </form>
        </div>
0 голосов
/ 30 мая 2020

Для управления цветом границы фокуса способом, которым это делается материализацией:

1) Используйте правильную разметку 

<div class="input-field">
  <input id="first_name2" type="text" class="validate">
  <label class="active" for="first_name2">First Name</label>
</div>

Это ввод / метка пара вложена внутри div с классом .input-field - оболочка позволяет метке перемещаться при фокусировке. (Он не должен применяться к самому входу, как в вашем примере). У вас также отсутствует этикетка (что может быть преднамеренно).

2) Используйте правильное переопределение css: 

input[type=text]:not(.browser-default):focus {
     border-bottom: 1px solid firebrick !important;
     -webkit-box-shadow: 0 1px 0 0 firebrick !important;
     box-shadow: 0 1px 0 0 firebrick !important;
   }

 input[type=text]:not(.browser-default):focus:not([readonly])+label {
     color: firebrick;
 }

Repalce firebrick с вашим желаемый цвет.

Codepen .

...