如何编辑 HTML 输入值颜色？答案

【问题标题】：How to edit HTML input value colour?如何编辑 HTML 输入值颜色？
【发布时间】：2021-02-11 02:57:27
【问题描述】：

在我的输入字段（文本）中，我有一个文本，一旦单击它就会消失。如何通过编辑颜色使该文本变浅？

对不起，代码看起来很乱，我不得不把它切碎给你看。

谢谢！

詹姆斯

<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>

【问题讨论】：

标签： html forms

【解决方案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" />

更新：由于所有主流浏览器都很好地支持占位符属性，因此无需手动执行任何操作。用这个可以达到同样的效果：

<input type="text" 
       size="35" 
       placeholder="Job Title e.g. Assistant Manager" />

【讨论】：

您好，感谢您的回复，我使用了您的代码，但是当我这样做时，输入字段的形状发生了变化，并且与其他字段不符。我该如何纠正这个问题？
就像我说的，你只需要添加你的样式。这是你的风格：jsfiddle.net/bdevic/DR4sg/4
啊，好的，谢谢，但我想要它，所以值文本是浅灰色的，输入到字段中的实际文本是黑色的。从那我改变并添加了字体/样式颜色，它从未改变值文本颜色？
我在回答中更改了颜色和样式。在这里您可以看到它的实际效果：jsfiddle.net/bdevic/DR4sg/17

【解决方案2】：

您可以在输入的样式规则中添加颜色：color:#ccc;

【讨论】：

我做到了，但是一旦我点击了输入字段并且文本消失了，我输入的文本也是这种颜色。我怎样才能使它们都有不同的颜色？
它是如何使用的？我把它放在样式部分，但代码只是出现在我的 html 页面中

【解决方案3】：

您可以在 onclick 事件处理程序中使用 JavaScript 更改 CSS color 属性（与更改 value 属性的方式相同）：

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

请注意，使用内联 JavaScript 并不是最佳做法。你最好给你的输入一个 ID，然后把你的 JavaScript 移到一个 <script> 块中：

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

【讨论】：

【解决方案4】：

请试试这个：

<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 放在输入标签的样式部分中，它就可以工作了。

【讨论】：

【解决方案5】：

在您的输入类型中添加style = color:black !important;。

【讨论】：