Изменить цвет заполнителя ввода HTML5 с помощью CSS

Chrome поддерживает атрибут placeholder в элементах input[type=text] (другие, вероятно, тоже).

Но следующий CSS ничего не делает для значения заполнителя:

 input[placeholder], [placeholder], *[placeholder] { color: red !important; } 
 <input type="text" placeholder="Value"> 

Всего 29 ответов


 /* do not group these rules */ *::-webkit-input-placeholder { color: red; } *:-moz-placeholder { /* FF 4-18 */ color: red; opacity: 1; } *::-moz-placeholder { /* FF 19+ */ color: red; opacity: 1; } *:-ms-input-placeholder { /* IE 10+ */ color: red; } *::-ms-input-placeholder { /* Microsoft Edge */ color: red; } *::placeholder { /* modern browser */ color: red; } 
 <input placeholder="hello"/> <br /> <textarea placeholder="hello"></textarea> 

Это будет стилизовать все textarea input и textarea .

Важное примечание: не группируйте эти правила. Вместо этого создайте отдельное правило для каждого селектора (один недопустимый селектор в группе делает всю группу недействительной).


Вы можете также хотеть стиль textareas:

 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #636363; } input:-moz-placeholder, textarea:-moz-placeholder { color: #636363; } 







Теперь у нас есть стандартный способ применить CSS к псевдоэлементу ввода: ::placeholder из этого черновика CSS-модуля уровня 4.


Используйте new ::placeholder если вы используете autoprefixer .

Обратите внимание, что .placeholder mixin из Bootstrap не рекомендуется в пользу этого.

Пример:

input::placeholder { color: black; }

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


Я просто понимаю, что для Mozilla Firefox 19+ браузер предоставляет значение непрозрачности для заполнителя, поэтому цвет не будет таким, как вы хотите.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

Я перезаписываю opacity на 1, поэтому будет хорошо.


Я не помню, где я нашел этот фрагмент кода в Интернете (он был написан не мной, не помню, где я его нашел и кто его написал).

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

Просто загрузите этот код JavaScript, а затем отредактируйте заполнитель с помощью CSS, вызвав это правило:

 form .placeholder { color: #222; font-size: 25px; /* etc. */ } 

Я думаю, что этот код будет работать, потому что заполнитель необходим только для ввода текста типа. Так что этой одной строки CSS будет достаточно для вашей потребности:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

Для пользователей Bootstrap , если вы используете class="form-control" , может возникнуть проблема специфичности CSS. Вы должны получить более высокий приоритет:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

Или, если вы используете Less :

.form-control{
    .placeholder(red);
}

Если вы используете Bootstrap и не можете заставить это работать, то, вероятно, вы упустили тот факт, что Bootstrap сам добавляет эти селекторы. Это Bootstrap v3.3, о котором мы говорим.

Если вы пытаетесь изменить заполнитель внутри CSS-класса .form-control, вы должны переопределить его следующим образом:

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

Как насчет этого

 <input type="text" value="placeholder text" onfocus="this.style.color='#000'; this.value='';" style="color: #f00;" /> 

Нет CSS или заполнителя, но вы получаете ту же функциональность.


Этот короткий и чистый код:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}

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

-webkit-text-fill-color: red;

который сделал свое дело.


Для пользователей SASS / SCSS, использующих Бурбон , он имеет встроенную функцию.

//main.scss
@import 'bourbon'

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Вывод CSS, вы также можете взять эту часть и вставить в свой код.

//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}

попробуйте этот код для другого элемента ввода другого стиля

your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

пример 1:

input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

пример 2:

input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }

Вот еще один пример:

 .form-control::-webkit-input-placeholder { color: red; width: 250px; } h1 { color: red; } 
 <div class="col-sm-4"> <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/> </div> 


Добавление очень приятной и простой возможности: фильтры CSS !

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

Это будет стилизовать все, включая заполнитель.

Далее будут установлены оба входа на одной и той же палитре, используя фильтр оттенка для изменения цвета. Теперь он очень хорошо рендерится в браузерах (кроме ie ...)

 input { filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%); } 
 <input placeholder="Hello world!" /> <input type="date" /><br> <input type="range" /> <input type="color" /> 

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

От: https://codepen.io/Nico_KraZhtest/pen/bWExEB

 function stylElem() { stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0) Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){ e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)" out.innerText = e.style.cssText })()} stylElem() 
 <div id="out"></div> <p> <input placeholder="Hello world!" /> <input type="date" /><br> <input type="range" /> <input type="color" /> Colors (change me)-> <input type="color" id="stylo" oninput="stylElem()" /> <br><br> <audio controls src="#"></audio> <br><br> <video controls src="#"></video> 

Документы фильтров CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/filter


Хорошо, заполнители ведут себя по-разному в разных браузерах, поэтому вам нужно использовать префикс браузера в вашем CSS, чтобы сделать их идентичными, например, Firefox по умолчанию обеспечивает прозрачность заполнителя, поэтому нужно добавить непрозрачность 1 в CSS, а также цвет, это не так в большинстве случаев это большая проблема, но хорошо, чтобы они были последовательными:

*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}

Вы можете изменить цвет заполнителя ввода HTML5 с помощью CSS. Если случайно ваш CSS конфликтует, эта заметка кода работает, вы можете использовать (! Важно), как показано ниже.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#909 !important;
   opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#909 !important;
   opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:#909 !important;
}

<input placeholder="Stack Snippets are awesome!">

Надеюсь, это поможет.


Вы можете использовать это для ввода и стиля фокуса:

input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */

Компас имеет миксин для этого из коробки.

Возьмите свой пример:

<input type="text" placeholder="Value">

И в SCSS с помощью компаса:

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

Смотрите документы для ввода ввода-заполнителя mixin.


Самый простой способ будет:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

попробуйте это поможет вам это будет работать во всех ваших любимых браузерах:

::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { 
    /* Firefox 19+ */
      color: pink;
    }

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }

Цвет заполнителя для определенного элемента в разных браузерах.

HTML

<input class='contact' type="email" placeholder="majed@firefly.com">

CSS 

    .contact::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: pink;
    }
    .contact::-moz-placeholder { /* Firefox 19+ */
      color: pink;
    }
    .contact:-ms-input-placeholder { /* IE 10+ */
      color: pink;
    }
    .contact:-moz-placeholder { /* Firefox 18- */
      color: pink;
    }

Есть идеи?

10000