Как изменить цвет входного значения HTML?

Question

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

Извините, код выглядит неопрятно, мне пришлось его расколоть, чтобы показать вам.

Спасибо!

Джеймс

<form>
   <input type="text" name="search" size="35"    
    onclick="this.value='';"onfocus="this.select()"
    onblur="this.value=!this.value?'Job Title   
    e.g. Assistant Manager':this.value;"
    value="Job Title e.g. Assistant Manager" 
    style="background-color:white; border: 
    solid 1px #6E6E6E; height: 30px; font-size:18px; 
    vertical-align:9px"/>

   <input type="text" name="searchterm" size="35" 
    style="background-color:white; border: solid 1px #6E6E6E;
    height: 30px; font-size:18px; vertical-align:9px"/>

   <input type="image" src="but.tiff" alt="Submit" width="60">
</form>

Answer 1

Может быть, что-то вроде этого (просто добавьте свой стиль):

<input type="text" 
       size="35" 
       value="Job Title e.g. Assistant Manager" 
       style="background-color:white; 
              border: solid 1px #6E6E6E;
              height: 30px; 
              font-size:18px; 
              vertical-align:9px;color:#bbb" 
        onfocus="if(this.value == 'Job Title e.g. Assistant Manager') {
                    this.value = '';
                    this.style.color='#000';
                 }" />

<input type="text" 
       name="searchterm" size="35" 
       style="background-color:white; 
              border: solid 1px #6E6E6E;
              height: 30px; 
              font-size:18px; 
              vertical-align:9px" />

Answer 2

Вы можете добавить цвет в правило стиля вашего ввода: color:#ccc;

Answer 3

Вы можете изменить свойство CSS color, используя JavaScript в обработчике событий onclick (так же, как вы изменяете свойство value):

<input type="text" onclick="this.value=''; this.style.color='#000'" />

Обратите внимание, что не рекомендуется использовать встроенный JavaScript. Вам лучше дать свой ввод идентификатору и переместить свой JavaScript вместо этого в <script> блок:

document.getElementById("yourInput").onclick = function() {
    this.value = '';
    this.style.color = '#000';
}

Answer 4

Добавьте style = color:black !important; в ваш тип ввода.

Answer 5

Пожалуйста, попробуйте это:

<input class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2" type="text" name="name" value="" placeholder="Your Name" style="background-color:blue;"/>

Вы в основном помещаете весь CSS в часть стиля тега input, и это работает.