title: How to override custom placeholder css
body: <p>I have a form that needed placeholders when viewing from a mobile screen. I didnt need them in desktop mode so I added some css that has the font white until the screen resolution breaks to mobile. then it changes the color so it is visible. problem is there are some textareas that i need to show the placeholders while in desktop mode. How can i override the css in the stylesheet? </p>
  
  <pre><code>input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
  color:    #FFFFFF !important;
  }
  input:-moz-placeholder, textarea:-moz-placeholder { 
  color:    #FFFFFF !important;
  }
  input::-moz-placeholder, textarea::-moz-placeholder { 
  color:    #FFFFFF !important;
  }
   input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
  color:    #FFFFFF !important;
  }
  @media (max-width: 1070px) {
   input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
  color:    #737373 !important;
  }
   input:-moz-placeholder, textarea:-moz-placeholder { 
  color:    #737373 !important;
   }
  input::-moz-placeholder, textarea::-moz-placeholder { 
  color:    #737373 !important;
   }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
  color:    #737373 !important;
   }
   }
  </code></pre>