Значок MaterializeCSS после поля ввода - PullRequest
Новая
       6

Значок MaterializeCSS после поля ввода

0 голосов
/ 10 октября 2018

На странице MaterializeCSS ' Ввод текста есть раздел для префикса поля ввода со значком. 

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

Есть ли способ, чтобы значок появлялся после поля ввода?

Я попробовал suffix класс CSS, и он не существовал.Также перемещение раздела <i class="material-icons">account_circle</i> после ввода / метки перемещает значок на следующую строку.

1 Ответ

0 голосов
/ 11 октября 2018

Материализация создала этот класс для .prefix: 

.input-field .prefix {
    position: absolute;
    width: 3rem;
    font-size: 2rem;
    -webkit-transition: color .2s;
    transition: color .2s;
    top: .5rem;
}

Вы можете перезаписать его в своем CSS и добавить свойство right: 0, чтобы выровнять значок вправо: 

.input-field .prefix{
  right: 0;
}

AБолее чистое решение - добавить класс right к <i>: 

.input-field .prefix.right{
  right: 0;
}

и добавить его к тегам <i>, которые вы хотите выровнять по правому краю.

jsfiddle

...