Clever Geek Handbook

Linear gradient background with color release

I have a linear gradient textbox as the background, but the text color is not showing 100%.

Some opacity works behind the text, but I haven't 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 a demon.

Any help is greatly appreciated. Thanks in advance.

+3


source to share


3 answers


Your color:white

; will only affect the text that is entered in the field input

... Search text placeholder

- so you need to target the placeholder and add the color 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" />
Run codeHide result


+2


source


The text appears grayed out because it is placeholder text. To create a 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 script: http://jsfiddle.net/whogfohs/1/

+1


source


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


source






More articles:


All Articles