title: Change colour of placeholder text underline
body: <p><a href="https://i.stack.imgur.com/fM4c7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fM4c7.jpg" alt="enter image description here"></a></p>
  
  <p>Basically I'm doing a contact form, the text input design as shown above.
  And the "First Name*" is a placeholder text.</p>
  
  <p>Does anyone know how to change the placeholder text underline to different colour to the placeholder text. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input {
    padding: 3px;
    border: 1px solid #ddd;
  }
  
  input::-webkit-input-placeholder {
   color: rgba(251,175,93,1); 
   font-weight: normal;
   text-decoration: underline;  
  }
  input::-moz-placeholder {
   color: rgba(251,175,93,1); 
   font-weight: normal;
   text-decoration: underline;
  }
  input:-moz-placeholder {   /* Older versions of Firefox */
   color: rgba(251,175,93,1);    
   font-weight: normal;
   text-decoration: underline;
  }
  input:-ms-input-placeholder { 
   color: rgba(251,175,93,1); 
   font-weight: normal;
   text-decoration: underline;
  }
  
  .textinput{ 
    color: #585857; 
    outline: none; 
    width: 230px; 
    margin: 0 0 15px 0; 
    border: 1px solid #c2c2c2; 
    font-size: 13px; 
    display: block;  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" name="name" id="name" class="textinput" placeholder=" First Name*"&gt;</code></pre>
  </div>
  </div>
  </p>