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

【问题标题】：making custom placeholder in css or javascript在 css 或 javascript 中制作自定义占位符
【发布时间】：2014-11-10 03:38:03
【问题描述】：

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

这是我的占位符

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

感谢您的回答。

【问题讨论】：

google.com/#q=style+placeholder

标签： javascript html css placeholder

【解决方案1】：

*::-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
}

【讨论】：

没有添加解释是否可以解决他的答案。

【解决方案2】：

如果您不介意使用 javascript/jquery，这里有一个适合您的选项：JSFiddle Demo 本质上，您是在 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();
     }
});

【讨论】：