HTML Textbox: Make partial placeholder text bold and underline

Question

Is it possible to style only a certain part of the placeholder text in an input? I'd like the "Click here" portion of the placeholder text to be bold and underlined.

<input type="text" class="input-text  hasDatepicker" name="wc_order_field_2563" id="wc_order_field_2563" placeholder="Click here to choose your pickup date*: (Tuesday - Saturday)" value="">

Appreciate your answer.

Regards,

Maddy

Gavin

Answer 1

This is possible if you use label instead of placeholder.

var sp = document.getElementById('sp');
function hid(){
	sp.style.display = "none"
}
function vi(){
	if(!document.getElementById('vali').value){
		sp.style.display = "inline-block";
	}else{
		hid();
	}
}

label{
	position : relative
}
label>span{
	position : absolute;
	left : 2px;
}
input{
	position : relative;
	background : none;
}

<label>
<span id="sp"><b><u>click here</u></b> to choose...</span>
<input type = "text" id = "vali" onfocus = "hid();" onblur = "vi();">
</label>

Haifa

Answer 2

It requires a few non-standard css rules to be fairly consistent in most browsers. https://css-tricks.com/almanac/selectors/p/placeholder/

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-weight: bold;
  text-decoration: underline;
}

::-moz-placeholder {
  /* Firefox 19+ */
  font-weight: bold;
  text-decoration: underline;
}

:-ms-input-placeholder {
  /* IE 10+ */
  font-weight: bold;
  text-decoration: underline;
}

:-moz-placeholder {
  /* Firefox 18- */
  font-weight: bold;
  text-decoration: underline;
}

input {
  width: 100%;
}

<input type="text" class="input-text  hasDatepicker" name="wc_order_field_2563" id="wc_order_field_2563" placeholder="Click here to choose your pickup date*: (Tuesday - Saturday)" value="">

Advocacy

thank you for sending this. However this does not answer the question i.e. if we can only apply this to the part of the placeholder text? – Gavin

Oh. I'll edit your question to say that. I don't think so but maybe someone will have a way - You might have to build a custom control or use a library with some additional style options, the html inputs don't have a built in way. – Advocacy