HTML文本框：使部分占位文本粗体和下划线。

Question

在输入框中，是否有可能仅对占位文本的某一部分进行样式设置？我希望将占位文本中的“点击这里”部分设置为粗体和下划线。

<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="">

感谢您的回复。

祝好，

Maddy

- maddysanoo

Answer 1

如果您使用标签而不是占位符，则可以做到这一点。

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>

- JY Lee

Answer 2

在大多数浏览器中保持一致性需要一些非标准的CSS规则。 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="">

- JasonB

---

谢谢您发送这个。然而，这并没有回答问题，即我们是否只能将其应用于占位符文本的部分？ - maddysanoo

哦，我会编辑你的问题来表达这个意思。我不确定，但也许有人会有办法 - 你可能需要构建一个自定义控件或使用带有一些额外样式选项的库，因为HTML输入框没有内置的方法。 - JasonB