linear-gradient background with color issue

Question

I have a textbox with a linear gradient as background but the text color is not appearing 100% white.

Some kind of opacity is working behind the text but I have not declared opacity anywhere.

CSS code:

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

Here is the demo.

Any help is highly appreciated. Thanks in advance.

Chrome but i realise you're talking about the placeholder text now. — Pogrindis, Jun 10 '15 at 14:13

score 2 · Accepted Answer · edited May 23 '17 at 11:48

Your color:white; will only affect text that is typed into the input field... Your search text is placeholder - so you need to target the placeholder and add a color to it - described here in more detail.

Here is the code.

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

Ahh now I understood the problem. That's awesome. I never considered that placeholder thing. Thanks a lot. — Raj, Jun 10 '15 at 14:12

score 1 · Answer 2 · answered Jun 10 '15 at 14:09

The text is appearing grey because that is the placeholder text. To style the placeholder you need to do the following:

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

Updated fiddle: http://jsfiddle.net/whogfohs/1/

score 1 · Answer 3 · answered Jun 10 '15 at 14:20

change your css code to this:

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

linear-gradient background with color issue

3 Answers3