трудности с изменением фокуса на текстовое поле при материализации - PullRequest
Новая
       8

трудности с изменением фокуса на текстовое поле при материализации

0 голосов
/ 09 февраля 2019

С проверкой фокуса и перемещением метки вверх, я не могу найти, где меняется этот css и как его контролировать.

Реальный фокус здесь - это 

<div class="input-field col s6">
     <i class="material-icons prefix ">account_circle</i>
     <input id="icon_prefix" type="text" class="validate"
       </input>
     <label for="icon_prefix">Character Name</label>
</div>

При проверке хрома я подумал, что это может сработать 

input[type=text]:not(.browser-default):focus:not([readonly]) {
    border-bottom: 1px solid black !important;
}

, но, увы, этого не произошло, и разочаровал тратить больше времени, чемЯ должен.Я здесь.

Вот весь фрагмент HTML 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Input Change</title>
  </head>
  <body>
      <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> 
      <div id="root">
        <div class="input-field col s6">
            <i class="material-icons prefix ">account_circle</i>
            <input id="icon_prefix" type="text" class="validate ">
            </input>
            <label for="icon_prefix">Character Name</label>
        </div>

      </div>
  </body>
</html>

CSS 

/* https://materializecss.com/text-inputs.html */
/* label focus color */
.input-field input:focus + label {
    color: black !important;
    /* border-bottom: 1px solid red !important; */
  }
  #icon_prefix {
    /* border-bottom: 1px solid red !important; */
    /* box-shadow: 0 1px 0 0 red !important */
  }
  .active {
      color: black !important;
  }

.validate{
    /* border-bottom: red !important; */
    /* border-bottom: 1px solid red !important; */
}
  /* label underline focus color */
  .row .input-field input:focus {
    border-bottom: 1px solid black !important;
    box-shadow: 0 1px 0 0 black !important
}

Вот jsFiddle.Проблема в том, что когда вы щелкаете текстовое поле, я выделяю строку зеленоватая .При осмотре я не мог понять это.

https://jsfiddle.net/robstao/b1goj7q2/3/

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

У вас есть несколько способов выполнить эту задачу.Некоторые из них рекомендуются, а с некоторыми легко идти.

1: Вы можете перейти к файлу materialize.css и проверить строку 13 или около того, вы найдете код ниже 

input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid #26a69a;
-webkit-box-shadow: 0 1px 0 0 #26a69a;
box-shadow: 0 1px 0 0 #26a69a;

}

измените значения цвета на основной цвет вашего сайта.

Примечание: вы найдете другую часть глобального кода CSS в верхней части файла CSS для материализации.попробуйте не мин версию.

2: Если вы хотите, вы можете перевернуть материализовать код CSS.пример ниже 

input {
border-bottom: none !important;
box-shadow: none !important;
}

3: вы можете выбрать наиболее рекомендуемый способ перекомпилировать файл sass для создания файла css и изменить там значения.Здесь вы найдете переменные

https://jsfiddle.net/bilalkhan891/bf0jtqLk/1/

0 голосов
/ 10 февраля 2019

Ваш выбор правильный.Единственное, что вам также нужно добавить в код:

"box-shadow: none! Важный;"

Также применяется тень от зеленого прямоугольника.Если вы предпочитаете делать его черным, но похожим на материал, вы всегда можете увеличить ширину границы с 1 до 2 пикселей.

Как примечание, метка перемещается, потому что к ней динамически применяется класс(также к значку), когда мы фокусируемся на вводе («активный»).

...