我只能使用 html5 和 css3。 我有一个表格，我需要模拟“发送表格数据”。单击提交按钮后，我需要隐藏表单并显示一些默认的 div (#result)。 我该怎么做(只有 css3 和 html5，没有 javascript)。
谢谢。
这是我的 HTML + CSS 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS CHALLENGE</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway:400 "Raleway");
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
.global {
background-color: #353535;
font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
.backgound {
background-color: whitesmoke;
height: 530px;
width: 400px;
margin:0 auto 0 auto;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
#loginForm {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
font-family: Raleway;
font-size: 20px;
font-style: normal;
font-variant: small-caps;
font-weight: 200;
line-height: 26.4px;
}
.header {
margin-left: 40px;
}
#triangle {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid cornflowerblue;
margin-top: 29px;
left: 54px;
position: relative;
}
#loginForm h2 {
background: cornflowerblue;
color: white;
height: 55px;
font-size: 2.5em;
padding-top: 10%;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
font-family: Raleway;
font-size: 39px;
font-style: normal;
font-variant: small-caps;
font-weight: 200;
line-height: 26.4px;
}
.item {
display: -webkit-box;
height: 30px;
width: 300px;
margin: 0 auto 15px;
background-color: white;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#idMessage {
height: 160px;
}
#loginForm button{
opacity: 0.5;
transition:opacity .3s;
-webkit-transition:opacity .3s;
background-color: darkolivegreen;
width: 308px;
height: 60px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
font-size: 2em;
}
#loginForm:valid button {
opacity: 1;
}
#result {
display: none;
}
#result:target {
display:block;
}
.myLoad {
position: relative;
}
.myLoad i {
position: absolute;
top: 8px;
left: 325px;
}
#val {
display: none;
}
.#idEmail:invalid #val {
display: block;
}
input:invalid .val {
display: block;
}
#idEmail:invalid, #idMessage:invalid{
color: red;
}
#idEmail:valid, #idMessage:valid{
color: green;
}
/* fa-spin*/
</style>
</head>
<body class="global">
<div class="backgound">
<form id="loginForm" action="#result" method="get">
<h2>
<span class="header">Contact Us!</span>
<div id="triangle"></div>
</h2>
<div class="myLoad">
<input class="item" id="idEmail" type="email"
placeholder="Email" required>
<i id="inval" class="fa fa-refresh"></i>
<i id="val" class="fa fa-refresh fa-spin"></i>
</input>
</div>
<div class="myLoad">
<input class="item" id="idSubject" type="text"
placeholder="Subject">
<i class="fa fa-refresh"></i>
</div>
<div class="myLoad">
<textarea class="item" id="idMessage" placeholder="Message"
rows="10" cols="40" required></textarea>
<i class="fa fa-refresh"></i>
</div>
<button class="item" type="submit">Send</button>
</form>
<div id="result" class="sended">Form sended</div>
</div>
</body>
</html>最佳答案
我认为您使用 :target 伪类是正确的。但是，你需要调换结果div和表单的顺序，然后用一个通用的兄弟选择器，see my example here组合起来。 .
(使用按钮提交表单似乎不太有效，但我认为那是因为 iframing，希望它对你有用。尝试单击 jsfiddle 上的测试链接导航到#result。)
关于html - 使用 css3 隐藏表单并显示默认 div。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34235202/