javascript - 在 css 或 javascript 中制作自定义占位符

Question

我想像这样设置占位符的样式:

这是我的占位符

粗体文本为红色，其余为黑色。

感谢您的回答。

Answer 1

如果您不介意使用 javascript/jquery，这里有一个选项供您选择: JSFiddle Demo 本质上，您是在 DIV 内部设置输入元素，并在其下方设置绝对定位的占位符。当文本字段具有焦点时，javascript 隐藏占位符文本，如果输入了值，则将其保持隐藏状态。 正如您从 fiddle 中看到的，这些类可用于同一页面上的多个输入，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();
     }
});