是否可以放置＆＃34;默认TEXT＆＃34; in＆＃34; CSS样式文件＆＃34;？

Question

我需要这个＆＃34;默认文字＆＃34;在我的CSS文件中，例如<input>代码和<textarea>，

所以我搜索了类似的内容：

 <style>
   testcss{
    default:"DefaultText";
     or 
    value:"DefaultText";
   }
 </style>

所以，这是我的问题， 我的表单中有几个<input>，我需要将它们全部设置为＃34;相同的默认值＆＃34;！例如，＃34; placeholter＆＃34; ou相同＆＃34;价值＆＃34;而且，我需要CSS <style>！

Answer 1

您可以使用javascript

raw_input

Answer 2

是的，可以使用<label>在<input>上使用z-index和透明背景颜色放置在输入后面。使用:focus更改为白色背景。如果输入了文字，请使用占位符不亮的:valid :invalid。使用.input:before您的＆＃34;样式＆＃34;标签的内容。 :first-line has sometimes some Firefox issues。使用我的Firefox for Mac，它使用了这段代码。

HTML

<label class="input"><input type="text" required="required"/></label>

CSS

.input {
    color: gray;
    display: block;
    font-size: small;
    padding-top: 3px;
    position: relative;
    text-indent: 5px;
}

input {
    background-color: transparent;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}

input:focus, input:first-line {
    background-color: white;
}

.input:before {
    content: "Some CSS Text";
}

input:valid { background-color:white; }
input:invalid{ background-color:transparent; }

屏幕截图（chrome浏览器）

1. 没有文字
2. 没有文字和焦点
3. 带文字和焦点
4. 带有文字。



请参阅https://jsfiddle.net/uueojg2g/1/进行测试。

摘要

我建议您使用css完成任务吗？也许不是，因为你应该只使用css进行演示。所以我总是尝试使用占位符

来获取html变体

如何使用＆＃34;纯粹＆＃34; HTML

首选方法，适用于所有当前浏览器：

<input type="text" name="" placeholder="Full Name"/>

对于IE9以及之前，我们只需要一些javascript：

<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/>

Answer 3

请记住使用html作为内容，使用css进行演示。

所以你可以通过使用value属性实际在html输入标记内部做到这一点：

<input value="default text">

对于文本区域，您将默认值放在标记之间：

<textarea> default text </textarea>

您可以使用javascript或jquery使其更方便，例如当用户点击textarea或input元素时使默认文本消失，但这超出了此问题的范围。