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

Question

我有一个文本框，背景使用了线性渐变，但文字颜色没有完全显示为白色。

在文字后面似乎有一些透明度，但我没有声明任何透明度。

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

这里是演示。

非常感谢任何帮助。提前致谢。

- Raj

---

文本对我来说完全是白色的。 - Pogrindis

你在使用哪个浏览器？ - Raj

Chrome，但我意识到你现在正在谈论占位符文本。 - Pogrindis

是的，现在已经修复了。谢谢。 - Raj

Answer 1

你的color:white只会影响输入到input字段中的文本... 你的搜索文本是placeholder - 所以你需要针对占位符并添加颜色 - 在这里更详细地描述。

以下是代码。

input[type="search"] {
  color: white;
  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;
  color: black;
  border: 1px solid black;
}

::-webkit-input-placeholder {
  /* WebKit browsers */
  
  color: white;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  
  color: white;
  opacity: 1;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  
  color: white;
  opacity: 1;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  
  color: white;
}

<input type="search" class="search-field" placeholder="Search" value="" name="s" />

- matthewelsom

---

啊，现在我明白了问题所在。太棒了，我从未考虑过那个占位符的事情。非常感谢。 - Raj

Answer 2

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

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

更新的代码片段：http://jsfiddle.net/whogfohs/1/

- karanmhatre

---

非常感谢您的解决方案。 - Raj

Answer 3

将你的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;  
}

- iklas