Не изменить цвет заполнителя с помощью Bootstrap 3

Два вопроса:

  • Я пытаюсь сделать текст заполнителя белым. Но это не сработает. Я использую Bootstrap 3. JSFiddle demo

  • Еще один вопрос: как изменить цвет заполнителя на глобальном уровне. То есть, у меня есть несколько полей, я хочу, чтобы только одно поле имело белый заполнитель, все остальные оставались в цвете по умолчанию.

Спасибо заранее.

HTML:

<form id="search-form" class="navbar-form navbar-left" role="search">
    <div class="">
        <div class="right-inner-addon"> <i class="icon-search search-submit"></i>
            <input type="search" class="form-control" placeholder="search" />
        </div>
    </div>
</form>

CSS

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;
    background-color:#303030;
    font-size: 13px;
    color:white;

}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    /*  pointer-events: none; */
    cursor: pointer;
    color:white;
}


/* do not group these rules*/
::-webkit-input-placeholder { color: white; }
FF 4-18 
:-moz-placeholder           { color: white; }
 FF 19+
::-moz-placeholder          { color: white; }
 IE 10+
:-ms-input-placeholder      { color: white; }

Ответы

Ответ 1

Назначьте местозаполнитель селектору класса следующим образом:

.form-control::-webkit-input-placeholder { color: white; }  /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: white; }  /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: white; }  /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: white; }  /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: white; }  /* Microsoft Edge */

Он будет работать тогда, потому что более сильный селектор, вероятно, заменит ваш глобальный. Я на планшете, поэтому я не могу проверить и подтвердить, какой более сильный селектор был:) Но он работает, я попробовал это в вашей скрипке.

Это также отвечает на ваш второй вопрос. Назначив его классу или идентификатору и предоставив ввод только этому классу, вы можете управлять входом в стиль.

Ответ 2

Здесь была опубликована проблема: https://github.com/twbs/bootstrap/issues/14107

Проблема была решена с помощью этой фиксации: https://github.com/twbs/bootstrap/commit/bd292ca3b89da982abf34473318c77ace3417fb5

Таким образом, решение должно отменить его обратно до #999, а не white, как было предложено (а также переопределить все стили бутстрапов, а не только для стилей webkit):

.form-control::-moz-placeholder {
  color: #999;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}

Ответ 3

Возможное Гоча

Рекомендуемая проверка работоспособности - убедитесь, что добавили класс form-control к вашим входам.

Если на вашей странице загружен загрузочный css, но ваши входные данные не имеют
class="form-control" тогда CSS-селектор-заполнитель к ним не применяется.

Пример разметки из документов:

e1360d2963.png

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

Ответ 4

Я использую Bootstrap 4, и решение Денниса Пузака у меня не работает.

Следующее решение работает для меня

.form-control::placeholder { color: white;} /* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control { color: white; }  /* Internet Explorer*/
.form-control::-ms-input-placeholder { color: white; }  /* Microsoft Edge*/

Ответ 5

Bootstrap имеет 3 строки CSS, в вашем файле bootstrap.css, который управляет цветом текста-заполнителя:

.form-control::-moz-placeholder {
  color: #999999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999999;
}
.form-control::-webkit-input-placeholder {
  color: #999999;
}

Теперь, если вы добавите это в свой собственный CSS файл, он не переопределит загрузку, потому что он менее конкретный. Таким образом, добавив свою форму внутри, добавьте ее в свой CSS:

form .form-control::-moz-placeholder {
  color: #fff;
  opacity: 1;
}
form .form-control:-ms-input-placeholder {
  color: #fff;
}
form .form-control::-webkit-input-placeholder {
  color: #fff;
}

Voila, которая переопределит загрузочный CSS.

Ответ 6

Я думаю, что qwertzman на правильном пути для лучшего решения этого.

Если вы хотите только создать конкретный заполнитель, тогда его ответ по-прежнему сохраняется.

Но если вы хотите переопределить цвет all заполнителей, (что более вероятно), и если вы уже компилируете свой собственный Bootstrap LESS, ответ еще проще!

Отмените эту переменную LESS: @input-color-placeholder

Ответ 7

Boostrap Placeholder Mixin:

@mixin placeholder($color: $input-color-placeholder) {
  // Firefox
  &::-moz-placeholder {
    color: $color;
    opacity: 1; // Override Firefox unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
}

теперь назовите его:

@include placeholder($white);

Ответ 9

С МЕНЬШЕ фактический mixin находится в префиксах vendor.less

.placeholder(@color: @input-color-placeholder) {
...
}

Этот mixin вызывается в формах. на строке 133:

.placeholder();

Ваше решение в LESS:

.placeholder(#fff);

Имхо - лучший способ пойти. Просто используйте Winless или компилятор композитора, например Gulp/Grunt, и даже лучше/быстрее.

Ответ 10

Другие не работали в моем случае (Bootstrap 4). Вот решение, которое я использовал.

html .form-control::-webkit-input-placeholder { color:white; }
html .form-control:-moz-placeholder { color:white; }
html .form-control::-moz-placeholder { color:white; }
html .form-control:-ms-input-placeholder { color:white; }

Это переопределяет загрузочные css, так как мы используем высокий уровень специфичности для элементов .form-control.