Html 仅使用 CSS 输入占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18329425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input placeholder using CSS only
提问by Akki619
I know there are lot's of questions regarding this query here but none of them provide the solution for me.
我知道这里有很多关于此查询的问题，但没有一个为我提供解决方案。
HTML
HTML
<input id="tb1" type="text" class="note" />
<br>
<p class="note1"> This is not done.</p>
CSS
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.
我正在尝试使用上面的代码和在网上找到的变体，但似乎没有一个适用于输入标签。它适用于 p 标签。
EDIT:I can't add value attribute to input tag and manage css for the desired result. It's the limitation of the system.
编辑：我无法将 value 属性添加到输入标签并管理 css 以获得所需的结果。这是系统的限制。
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"
EDIT2：忘记我的 css，有没有什么方法可以在不使用占位符属性的情况下使用纯 css 来实现占位符文本input type="text"
采纳答案by Tieson T.
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
无效。<input />元素不是容器。正如规范所述，禁止使用尾标签（浏览器基本上会忽略）：http: //www.w3.org/TR/html401/interact/forms.html#h-17.4
回答by Hashem Qolami
:beforecreates a pseudo-element that is the first child of the element matched.
:before创建一个伪元素，它是匹配元素的第一个子元素。
The selected element MUST be a container tag. An empty tag like <input>doesn't have any children element.
所选元素必须是容器标签。像<input>这样的空标签没有任何子元素。
If you can't edit your HTML code manually, you're still able to that by using JavaScript:
如果您无法手动编辑 HTML 代码，您仍然可以使用 JavaScript 进行编辑：
document.getElementById("tb1").setAttribute("placeholder", "Enter your number");
Update
更新
If you want to achieve this by using CSS only, you need to have a container element wrapping your <input>(or come after it).
如果你只想通过使用 CSS 来实现这一点，你需要有一个容器元素来包装你的<input>（或在它之后）。
BUTIt doesn't work correctly as placeholderdo. You'll not able to check the value of <input>by CSS. If you write something inside the <input>, after blurevent, the generated placeholder will be displayed over the <input>again.
但是它不能正常工作placeholder。您将无法<input>通过 CSS检查 的值。如果在<input>, afterblur事件中写一些东西，生成的占位符将<input>再次显示。
HTML:
HTML：
<label>
<input id="tb1" type="text" class="note">
</label>
CSS:
CSS：
label {
position: relative;
}
label:after {
content: 'Enter your number';
position: absolute;
left: 5px;
top: 0;
color: #bbb;
}
#tb1 {
position: relative;
}
#tb1:focus {
z-index: 10;
}
回答by Danield
EDIT:
编辑：
Try this for starters: (Note:you'll need some js to detect if text has been entered in the input)
初学者试试这个：（注意：你需要一些js来检测输入中是否输入了文本）
Apart from this - I don't think this there is a css solution for placeholder text on an input element without using the placeholder attribute.
除此之外 - 我不认为这是一个 css 解决方案，用于输入元素上的占位符文本而不使用占位符属性。
Markup
标记
<div class="container">
<input />
<div class="fakePlaceholder">Some placeholder text</div>
</div>
css
css
.container
{
position: relative;
}
input
{
background: transparent;
}
input:focus + .fakePlaceholder
{
display: none;
}
.fakePlaceholder
{
color:gray;
position:absolute;
top: 3px;
left: 5px;
z-index: -1;
}
You can't use pseudo elements on an inputtag - or any other non-container elements for that matter
您不能在input标签上使用伪元素- 或任何其他非容器元素
From the Pseudo-Elements tag info:
从伪元素标签信息：
you cannot use them (pseudo elements) with replaced elements (see below) which do not have actual content. This is because the generated content resides within the element.
...Replaced Elements
Any element whose appearance and/or dimensions are determined by some external resource is considered to be a replaced element. Some pseudo-elements cannot be applied to replaced elements because they have no "content" or get replaced with something (such as user interface controls). Replaced elements include images (
<img>), inline frames (<iframe>), line breaks (<br>), horizontal rules (<hr>), plugins (<object>), form elements (<button>,<textarea>,<input>, and<select>), videos (<video>), audio sounds (<audio>), and canvases (<canvas>). Any other element is considered to be a non-replaced element.
您不能将它们（伪元素）与没有实际内容的替换元素（见下文）一起使用。这是因为生成的内容驻留在元素中。
...替换元素
任何外观和/或尺寸由某些外部资源决定的元素都被认为是被替换的元素。某些伪元素不能应用于替换元素，因为它们没有“内容”或被某些东西（例如用户界面控件）替换。替换元素包括图像（
<img>），内联框架（<iframe>），换行符（<br>），水平规则（<hr>），插件（<object>），表单元素（<button>，<textarea>，<input>，和<select>），视频（<video>），音频声音（<audio>），和画布（<canvas>）。任何其他元素都被视为非替换元素。
回答by Bhojendra Rauniyar
I have found this method but not supported by all browsers:
我找到了这种方法，但并非所有浏览器都支持：
#tb1.note:empty:before{
content: "Enter your number";
}
Note: you have forgot to place an id selector #tb1.note
注意：您忘记放置 id 选择器#tb1.note
回答by NinjaKC
Another way this can be accomplished, and have not really seen any others give it as an option, is to instead use an anchor as a container around your input and label, and handle the removal of the label via some color trickory, the #hashtag, and the css a:visited. (jsfiddle at the bottom)
可以实现的另一种方法，并且还没有真正看到任何其他人将其作为选项，而是使用锚点作为输入和标签周围的容器，并通过一些颜色技巧处理标签的移除，#hashtag ，和 css a:visited。（底部的jsfiddle）
Your HTML would look like this:
您的 HTML 将如下所示：
<a id="Trickory" href="#OnlyHappensOnce">
<input type="text" value="" id="email1" class="inputfield_ui" />
<label>Email address 1</label>
</a>
And your CSS, something like this:
还有你的 CSS，像这样：
html, body {margin:0px}
a#Trickory {color: #CCC;} /* Actual Label Color */
a#Trickory:visited {color: #FFF;} /* Fake "Turn Off" Label */
a#Trickory:visited input {border-color: rgb(238, 238, 238);} /* Make Sure We Dont Mess With The Border Of Our Input */
a#Trickory input:focus + label {display: none;} /* "Turn Off" Label On Focus */
a#Trickory input {
width:95%;
z-index:3;
position:relative;
background-color:transparent;
}
a#Trickory label {
position:absolute;
display:block;
top:3px;
left:4px;
z-index:1;
}
You can see this working over at jsfiddle, note that this solution only allows the user to select the field once, before it removes the label for good. Maybe not the solution you want, but definitely an available solution out there that I have not seen others mention. If you want to experiment multiple times, just change your #hashtag to a new 'non-visited' tag.
您可以在 jsfiddle 上看到这一点，请注意，此解决方案仅允许用户选择该字段一次，然后才能永久删除标签。也许不是您想要的解决方案，但绝对是我没有看到其他人提到的可用解决方案。如果您想多次试验，只需将#hashtag 更改为新的“未访问”标签即可。
回答by Hafenkranich
If you cant manipulate the html and use placeholder="". Use javascript to manipulate the placeholder. Every css approach is hack-isch anyway.
E.g. with jQuery:
$('#myFieldId').attr('placeholder', 'Search for Stuff');
如果您无法操作 html 并使用placeholder="". 使用 javascript 操作占位符。无论如何，每种 css 方法都是 hack-isch。例如使用 jQuery：
$('#myFieldId').attr('placeholder', 'Search for Stuff');
