Question

我创建了一个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>

Answer 1

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

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

Answer 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更新。

CSS显示表单字段

2 个答案: