Html 如何使用 CSS 设置占位符值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8075986/
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
How to set placeholder value using CSS?
提问by n92
I want to set the placeholder value of an input box using only css and not JavaScript or jQuery. How can I do this?
我想仅使用 css 而不是 JavaScript 或 jQuery 来设置输入框的占位符值。我怎样才能做到这一点？
回答by Charles
You can do this for webkit:
您可以为 webkit 执行此操作：
#text2::-webkit-input-placeholder::before {
color:#666;
content:"Line 1\A Line 2\A Line 3\A";
}
回答by Sarfraz
AFAIK, you can't do it with CSS alone. CSS has contentrule but even that can be used to insert content before or after an element using pseudo selectors. You need to resort to javascript for that OR use placeholderattribute if you are using HTML5 as pointed out by @Blender.
AFAIK，你不能单独使用 CSS。CSS 有content规则，但即便如此，它也可用于使用伪选择器在元素之前或之后插入内容。placeholder如果您使用的是@Blender 指出的 HTML5，则需要为该 OR use属性使用 javascript。
回答by Blender
As @Sarfraz already mentioned CSS, I'll just add HTML5 to the mix.
正如@Sarfraz 已经提到的 CSS，我只会将 HTML5 添加到组合中。
You can use the HTML5 placeholderattribute:
您可以使用 HTML5placeholder属性：
<input type="text" placeholder="Placeholder text blah blah." />
回答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;
pointer-events: none;
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 Filippo Sotto Mayor Matoso
From what I understand using,
据我了解使用，
::-webkit-input-placeholder::beforeor ::-webkit-input-placeholder::after,
::-webkit-input-placeholder::before或::-webkit-input-placeholder::after,
to add more placeholder content doesn't work anymore. Think its a new Chrome update.
添加更多占位符内容不再起作用。认为这是一个新的 Chrome 更新。
Really annoying as it was a great workaround, now im back to just adding lots of empty spaces between lines that I want in a placeholder. eg:
真的很烦人，因为这是一个很好的解决方法，现在我回到只是在占位符中添加我想要的行之间的大量空格。例如：
<input type="text" value="" id="email1" placeholder="I am on one line. I am on a second line etc etc..." />
回答by Hafenkranich
If the content is loaded via ajax anyway, use javascript to manipulate the placeholder. Every css approach is hack-isch anyway.
E.g. with jQuery:
$('#myFieldId').attr('placeholder', 'Search for Stuff');
如果内容是通过 ajax 加载的，请使用 javascript 来操作占位符。无论如何，每种 css 方法都是 hack-isch。例如使用 jQuery：
$('#myFieldId').attr('placeholder', 'Search for Stuff');
回答by 5c4r10
Some type of inputhasn't got the :after or :before pseudo-element, so you can use a background-image with an SVG text element:
某些类型的输入没有 :after 或 :before 伪元素，因此您可以使用带有 SVG 文本元素的背景图像：
input {
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='15' fill='gray' font-size='15'>Type Something...</text></svg>");
background-repeat: no-repeat;
}
input:focus {
background-image: none;
}
My codepen: https://codepen.io/Scario/pen/BaagbeZ
我的代码笔：https://codepen.io/Scario/pen/BaagbeZ
回答by Isaac
I recently had to do this with google's search box, this is an extreme hack reserved for extreme situations (the resulting selector was slightly different, but I made it work in this example)
我最近不得不用谷歌的搜索框来做这个，这是一个为极端情况保留的极端黑客（结果选择器略有不同，但我在这个例子中使它工作）
/*
this is just used to calculate the resulting svg data url and need not be included in the final page
*/
var text = placeholder.outerHTML;
var url = "data:image/svg+xml;,"+text.replace(/id="placeholder"/g," ").replace(/\n|([ ] )/g,"");//.replace(/" /g,"\"");
img.src = url;
result.value = url;
overlay.style.backgroundImage = "url('"+url+"')";svg,img{
border: 3px dashed black;
}
textarea{
width:50%;
height:300px;
vertical-align: top;
}
.wrapper{
position: relative;
display: inline-block;
}
#overlay{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
pointer-events: none;
background-repeat: no-repeat;
background-position: center left;
}
#my_input:focus + #overlay{
display: none;
}As SVG <svg id="placeholder"xmlns="http://www.w3.org/2000/svg"width="235"height="13"><text x="0"y="10"font-family="Verdana"font-size="12" fill ="green">Some New Rad Placeholder</text></svg>
<br>
As IMG <img id="img">
<br>
As Data URI <textarea id="result"></textarea><br>
As "Placeholder" <div class="wrapper">
<input id="my_input" />
<div id="overlay">
</div>回答by Susy
Change your meta tag to the one below and use placeholder attribute inside your HTML input tag.
将您的元标记更改为下面的那个，并在您的 HTML 输入标记中使用占位符属性。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<input type="text" placeholder="Placeholder text" />?