Question

我有一个文本框，其背景为线性渐变，但文字颜色不是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;
}

这是demo。

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

Answer 1

你的color:white;只会影响在input字段中输入的文字...您的搜索文字为placeholder - 因此您需要定位占位符并为其添加颜色 - 请参阅more detail中的说明。

这是代码。

＆＃13;

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

＆＃13;

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

＆＃13;

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/

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

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

3 个答案: