仅使用CSS输入占位符 [英] Input placeholder using CSS only

问题描述

我知道这个查询有很多问题，但是没有一个为我提供解决方案。

HTML

 < input id =tb1type =textclass =note/> 
 
< br> 
 
< p class =note1>这没有完成。< / p> 
  

CSS

< pre class =lang-css prettyprint-override> p.note1：before {
content：Note：;
}

tb1.note：before {
content：输入您的号码;
}


我尝试使用上述代码和在网络上找到的变体，但没有似乎工作的输入标签。它的工作p标签。

编辑：我无法为输入标签添加值属性，并为所需结果管理CSS。这是系统的限制。

EDIT2：忘记我的css，有没有任何方式，占位符文本可能不使用placeholder属性，只需使用简单的css为输入type =text

解决方案

不适用于以下简单的事实：

 < input id =tb1type =textclass = note>< / input> 
  

无效。 < input /> 元素不是容器。作为规范说明，endtag被禁止（浏览器基本上被忽略）： http://www.w3.org/TR/html401/interact/forms.html#h-17.4

I know there are lot's of questions regarding this query here but none of them provide the solution for me.

HTML

<input id="tb1" type="text" class="note" />

<br>

<p class="note1"> This is not done.</p>

CSS

p.note1:before{
    content: "Note:";
}

tb1.note:before{
    content: "Enter your number";
}

I am trying with above code and the variation as found on the web but none seems to work for input tag. It's working for p tag.

EDIT: I can't add value attribute to input tag and manage css for the desired result. It's the limitation of the system.

EDIT2: Forget about my css, is there any way that placeholder text is possible without using placeholder attribute and just with plain css for input type="text"

解决方案

It doesn't work for the simple fact that this:

<input id="tb1" type="text" class="note"></input>

is not valid. <input /> elements are not containers. As the spec notes, endtags are forbidden (and essentially ignored by the browser): http://www.w3.org/TR/html401/interact/forms.html#h-17.4

这篇关于仅使用CSS输入占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！