Html 带有颜色问题的线性渐变背景

我有一个以线性渐变为背景的文本框，但文本颜色不是100%白色

文本后面有某种不透明度，但我没有在任何地方声明不透明度

CSS代码：

input[type="search"] {
    color: #ffffff;
    height: 35px;
    margin: 0;
    padding: 10px;
    border: none;
    box-shadow: none;
    background: rgba(0, 0, 0, 0) linear-gradient(0deg, #820462 0%, #992478 100%);
    font-size:1rem;
}
input[type="search"]:focus {
    background: transparent;
}

这是你的电话号码

---

非常感谢您的帮助。提前感谢。

文本显示为灰色，因为这是占位符文本。要设置占位符的样式，需要执行以下操作：

input[type="search"]::-webkit-input-placeholder {
   color: #fff;
}

input[type="search"]:-moz-placeholder { /* Firefox 18- */
   color: #fff;  
}

input[type="search"]::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
}

input[type="search"]:-ms-input-placeholder {  
   color: #fff;  
}

---

更新的小提琴：

你的

颜色：白色

；只会影响在

输入

字段中键入的文本。。。您的搜索文本是

占位符

-因此您需要将占位符作为目标并为其添加颜色-如中所述

这是代码

input[type=“search”]{
颜色：白色；
高度：35px；
保证金：0；
填充：10px；
边界：无；
盒影：无；
背景：rgba（0,0,0,0）线性梯度（0度，#820462 0%，#992478 100%）；
字号：1rem；
}
输入[type=“search”]：焦点{
背景：透明；
颜色：黑色；
边框：1px纯黑；
}
：-webkit输入占位符{
/*WebKit浏览器*/
颜色：白色；
}
：-moz占位符{
/*Mozilla Firefox 4至18*/
颜色：白色；
不透明度：1；
}
：-moz占位符{
/*Mozilla Firefox 19+*/
颜色：白色；
不透明度：1；
}
：-ms输入占位符{
/*Internet Explorer 10+*/
颜色：白色；
}

---

将css代码更改为：

input[type="search"] {
    color: #999;
    height: 35px;
    margin: 0;
    padding: 10px;
    border: none;
    box-shadow: none;
background: #820462;
background: -moz-linear-gradient(top,  #820462 0%, #992478 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#820462), color-stop(100%,#992478));
background: -webkit-linear-gradient(top,  #820462 0%,#992478 100%);
background: -o-linear-gradient(top,  #820462 0%,#992478 100%);
background: -ms-linear-gradient(top,  #820462 0%,#992478 100%);
background: linear-gradient(to bottom,  #820462 0%,#992478 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#820462', endColorstr='#992478',GradientType=0 );

    font-size:1rem;
}
input[type="search"]:focus {
    background: transparent;
}

    ::-webkit-input-placeholder {
   color: #fff;
}

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

::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
}

:-ms-input-placeholder {  
   color: #fff;  
}

---

文本在我看来完全是白色的。你在看哪个浏览器？Chrome，但我意识到你现在谈论的是占位符文本。是的，它现在被修复了。谢谢。啊，现在我明白问题了。太棒了。我从来没有考虑过占位符的事情。非常感谢。非常感谢您的解决方案。