在第一个字符上输入占位符样式

问题描述

我有一个占位符。但是我想在此占位符上应用样式，以使我的第一个字符以粗体（和其他字体大小）

<input oninput="writeInk()" onclick="clickInput2()" id="search_input_id" type="text" 
class="headerSelectAndInputPrinter" style="width:250px; margin-left: 8px;height: 42px" 
placeholder="2 - Second Input" />

我正在寻找粗体和其他字体大小的“ 2”。我对此一无所获...我发现的所有命题都行不通...

https://jsfiddle.net/4gabefLu/

非常感谢！

解决方法

我认为您不能使用css规则设置占位符的首字母样式。

您可以使用javascript构建伪占位符，并使用::first-letter选择器设置第一个字母的样式。

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

您的输入将变为：

<div class="wrapper">
  <input oninput="writeInk()" onpaste="writeInk()"  onkeyupe="writeInk()" onclick="clickInput2()" id="search_input_id" type="text" class="headerSelectAndInputPrinter" style="width:250px; margin-left: 8px;height: 42px" />
  <span class="pseudoPlaceholder">2 - Second Input</span>
</div>

您可以使用CSS选择器设置样式

.wrapper{
   position: relative; 
}


.pseudoPlaceholder{
   pointer-events: none;
   position: absolute;
   top: 50%;
   left: 15px;
   transform: translate(0,-50%);
}

.pseudoPlaceholder::first-letter{
   font-weight: bold;
}

并使用javascript处理伪占位符：

function writeInk(){
   if($("#search_input_id").val() == ""){
       $(".pseudoPlaceholder").show();
   }else{
       $(".pseudoPlaceholder").hide();
   }
}

这是结果：https://jsfiddle.net/01w2abx7/19/

html placeholder