如何在占位符属性中设置单个单词的样式

Question

有没有办法在占位符属性中设置单个单词的样式？ 我的营销部门要求我将占位符中的第一个单词加粗。 下面是形象营销想要实现的：

任何建议将不胜感激。

Answer 1

我认为这种方式更好。

 var state = true; function hideText() { var info = document.querySelector('#search').value; if (state) { document.querySelector('#text').style.visibility = "hidden"; state = false } else if (!state && info == "") { document.querySelector('#text').style.visibility = "visible"; state = true; } } function clickText() { document.querySelector('#search').focus() } document.querySelector('#search').addEventListener('focus', hideText); document.querySelector('#search').addEventListener('blur', hideText); document.querySelector('#text').addEventListener('click', clickText);

 :root { font-size: 10px; --color-main: rgb(66, 157, 199); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 2rem; } #container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } #wrapper { position: relative; } #text { position: absolute; top: 1rem; left: 1rem; } #search { width: 50rem; height: 5rem; padding-left: 1rem; border: 3px solid var(--color-main); border-radius: 5px; font-size: inherit; font-family: inherit; }

 <div id="container"> <div id="wrapper"> <input id="search" name="busqueda" type="text"> <label for="busqueda" id="text"> <strong>Hello</strong> World!</label> </div> </div>

Answer 2

为<label>样式而不是输入

 label{ display: inline-block; border: 1px solid #ccc; padding: 12px 16px; } label input{ border:none; outline:none; }

 <label> SEARCH <input type="search" placeholder="vendors, healthcare..."> </label>

Answer 3

您不能使用占位符标签执行此操作，但您可以通过样式元素使其显示为这种方式，如下例所示：

html

<div><input type="text"/> <span>First</span> <span>name:</span></div>

javascript

$("span").css({"position": "absolute"})

$("span:first").css({"color": "green" })
$("span").eq("1").css({"color": "red", "left": "44px" })

$("input").on("focus", function(){

$("span").hide();

})

$("input").on("blur", function(){
if ($(this).val() == "") { $("span").css("display", "inline-block")}
})

    $("span").click(function(){

    $("span").hide()

    })

css

div {position: relative}
input {color: green}

span {left: 10px}

http://jsfiddle.net/Fgd2e/1/

Answer 4

这个占位符属性是一个属性，将原始文本作为输入，......它不能被样式化......这里只有选项，所以在你的输入框上使用一些javascript......，

检查这个可能会派上用场

 function handle(){ if(document.getElementById("input").value==""){ document.getElementById("tag").style='opacity:1'; } } function handle2(){ if(document.getElementById("input").value!=""){ document.getElementById("tag").style.display="none" } else{ document.getElementById("tag").style.display="inline-block"; } } function handle3(){ document.getElementById("tag").style.display="none"; document.getElementById("input").focus(); } document.getElementById("input").addEventListener('mouseout',handle,false) document.getElementById("input").addEventListener('keyup',handle2,false) document.getElementById("tag").addEventListener('click',handle3,false)

 input_container{ position:relative; } #input { position:relative; width:400px; height:20px; background:red; padding:0; margin:none; } #tag{ display:inline-block; position:absolute; border-radius:4px; left:2%; }

 <div id="input_container"> <input id="input"> <div id="tag"><span style="font-weight:bold">Search</span> vendors,healthcare..</div> </div>