CODEWITHSUNDEEP
htmlcssinputplaceholder
Evelyn
Evelyn

Reputation: 656

Change colour of placeholder text underline

enter image description here

Basically I'm doing a contact form, the text input design as shown above. And the "First Name*" is a placeholder text.

Does anyone know how to change the placeholder text underline to different colour to the placeholder text. 

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;  
}
<input type="text" name="name" id="name" class="textinput" placeholder=" First Name*">

Upvotes: 1

Views: 3936

Answers (2)

tektiv
tektiv

Reputation: 14187

Firefox & Safari solution

You can use text-decoration-color css property like this :

input::-moz-input-placeholder {
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: rgba(251,175,93,1);  
}

Result : enter image description here
See this fiddle for more information

Note that it will only work on :

  • Firefox 6+ (with -moz-) - Tested
  • Safari 9+ (with -webkit-)

See for yourself

Chrome & Opera solution

You can use both input-placeholder pseudo-element and border-bottom css property like this :

::-webkit-input-placeholder {
    border-bottom: 1px solid rgba(251,175,93,1);
}

Result : enter image description here
See this fiddle for more information

Note that it will only work on :

  • Chrome 48+ (with -webkit-) - Tested
  • Opera 36+
  • Safari 9+

See for yourself

Upvotes: 3

Harshita
Harshita

Reputation: 442

try this one it works

 input {
  padding: 3px;
  border: 1px solid #ddd;
}

input::-webkit-input-placeholder {
    color: rgba(9,0,255,1); 
    font-weight: normal;
    text-decoration: underline;  
  text-decoration-color:rgba(255,60,0,1);
}
input::-moz-placeholder {
    color: rgba(9,0,255,1);  
    font-weight: normal;
    text-decoration: underline;
  text-decoration-color:rgba(255,60,0,1);
}
input:-moz-placeholder {   /* Older versions of Firefox */
    color: rgba(9,0,255,1);  
    font-weight: normal;
    text-decoration: underline;
  text-decoration-color:rgba(255,60,0,1);
}
input:-ms-input-placeholder { 
    color: rgba(9,0,255,1); 
    font-weight: normal;
    text-decoration: underline;
  text-decoration-color:rgba(255,60,0,1);
}

.textinput{ 
  color: black; 
  outline: none; 


  width: 230px; 
  margin: 0 0 15px 0; 
  border: 1px solid black; 
  font-size: 13px; 
  display: block;  
}

Upvotes: 0

Related Questions