CSS 显示表单域答案

【问题标题】：CSS to display form fieldCSS 显示表单域
【发布时间】：2014-01-21 17:24:08
【问题描述】：

我创建了一个 HTML 表单，我想用 CSS 将值分配给输入字段，而不是 value="Email" 我为每个字段分配了一个 ID，我想使用该 ID 并将值分配给该字段. 给出了表格的代码。在这种情况下请帮助我，我将不胜感激

<!DOCTYPE HTML>
<html>
<head>
<title>Facebook Add PHP Example</title>
<style type="text/css">
#formwrapper{
width:340px;
border:0;
background-color:#dce37f;
margin: 70px auto;
padding: 20px 0;
display:block;
}

form {
display:block;
width:340px;
margin: 0 auto;
}

.text{
width: 275px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 18.5px;
}
.text:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.fname{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 18.5px;
}
.fname:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.lname{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 1px;
}
.lname:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
</style>

<script type="text/javascript">

</script>

</head>
<body class="body">
<div id="mainwrapper">
<div id="formwrapper">
<div id="content_image4" class="ss_box_content ss_image_content">
<img class="no_hotspots" src="original_hembakat_besta_ll.png" />
</div>
<form id="demo-form">

    <input type="email" name="email" id="Email" parsley-trigger="change" required class="text" /><br/>
    <input type="text" name="firstname" id= "Fornamn" required size="18px" class="fname" />
     <input type="text" name="lastname" id= "Efternamn" required size="18px" class="lname" /><br/>
     <center><input type="submit" name="submit" value="Send" /></center>
     </div>

</form>
</div>
</div>
</body>
</html>

【问题讨论】：

你试过什么？发生了什么？你用了什么代码？在问题中提供您的代码并添加jsfiddle。
我编辑代码，希望你能明白我想要什么
具体是什么问题？
问题是我得到了工作机会，他们使用 ShortStock.com 来设计 Facebook 应用程序。但是在 ShotStock 中，我无法像我们通常分配的那样将值分配给表单字段。我不能用 javascript 做到这一点，因为我只有 CSS 选项。我想通过 css 显示每个字段的值。在表单输入字段中，我没有分配 value=this 的选项，我只有 id，我想在 CSS 中使用该 ID 将值分配给该字段。
这是我的表格，mrprofessional.se/facebook/index2.php

标签： html css

【解决方案1】：

<input placeholder="This grey text will be deleted if the user clicks on the input" />

您可以查看支持here，使其适用于 IE lte 9 here，并查看规范here。

【讨论】：

是的，这是真的，但我实际上是在 ShortStack.com 数据库中设计此表单，并且我无法将值或占位符分配给输入字段。在输入字段中，我只有这个给定的属性我有 CSS 控件，我想要使用类或 Id 将值分配给字段。
只有 CSS Editor，我们在 wordpress 中使用的那种编辑器，界面和 wordpress 一样。你将 CSS 框并编写 css 并进行更改，我也会托盘 sripts，但我只能看到 css 框。我不确定在这个框中我会使用脚本
如果你不能使用脚本或占位符，那你就走运了。
好的，但是如果我们为此使用脚本，那么哪些脚本可以使用呢？其实我的任务是设计这种形式和页面facebook.com/Hembakat/app_1422281951321099
如何使用 Java Script 做到这一点？

【解决方案2】：

我找到了答案.... 用于标签

#Email:before {
   content: "Email address: ";
}
#Fornamn:before {
   content: "Email address: ";
}
#Efternamn:before {
   content: "Email address: ";
}

占位符

::-webkit-input-placeholder::beforeor ::-webkit-input-placeholder::after

不幸的是，添加更多占位符内容不再起作用。认为它是一个新的 Chrome 更新。

【讨论】：