在CSS或JavaScript中制作自定义占位符

Question

我想这样设置占位符的样式：

这是我的placholder

粗体显示为红色，其余显示为黑色。

谢谢您的回答。

Answer 1

如果您不介意使用javascript / jquery，则可以使用以下选项： JSFiddle演示 本质上，您是在DIV内部设置输入元素，并在其下方放置绝对位置的占位符。 当文本字段具有焦点时，javascript将隐藏占位符文本，如果已输入值，则将其隐藏。 从小提琴中可以看出，这些类可用于同一页面上的多个输入，而javascript则独立地处理显示/隐藏功能，而无需为每个输入使用唯一的标记。

HTML：

<div class="myinput-div">
    <input class="myinput" type="text"/>
    <p class="myinput-placeholder">placeholder</p>
</div>

CSS：

* {
    box-sizing: border-box;
}
p.myinput-placeholder {  
    position: absolute;
    margin: 0;
    padding: 4px;
    top: 0; left: 0; bottom: 0; right: 0;
    color: #e6e6e6;
    z-index: -1;
}
div.myinput-div {
    position: relative;
    width: 100px;
}
input.myinput {
    width: 100%;
    position: relative;
    z-index: 10;
    background: none;
    border: 1px solid #c6c6c6;
    padding: 3px;
}

Javascript（jQuery）：

$('.myinput').on("focus", function(){
     $(this).siblings('.myinput-placeholder').eq(0).hide();
});
$('.myinput').on("blur", function(){
     if($(this).val() == "") {
         $(this).siblings('.myinput-placeholder').eq(0).show();
     }
});

Answer 2

*::-webkit-input-placeholder {
     //here is your code
}
*::-moz-placeholder {
    /* FF 4-18 */
 //here is your code
}
*:-ms-input-placeholder {
    /* IE 10+ */
 //here is your code
}