我尝试为我的简单联系表单制作一个自定义提交按钮,因为我想用CSS设置它的样式。我将输入类型设置为提交,每当我点击按钮时它既不提交也不点击。
我创建了一个名为蓝色按钮的类,我的样式将显示但无法提交。
<a class="blue button" input type="submit">Everything? Send!</a>
然后我尝试了这个方法并提交,但它没有显示我创建的样式!
<input class="blue button" type="submit" value="Send">
表格
<form method="post" id="submitform" action="submitemail.php" >
<input type="text"
class="formstyle"
title="Name"
data-placeholder="Name..."
name="name" />
<input type="text"
class="formstyle"
title="Email"
data-placeholder="Website..."
name="website" />
<input type="text"
class="formstyle"
title="Email"
data-placeholder="Email..."
name="email" />
<input type="text"
class="formstyle"
title="Email"
data-placeholder="Business or Personal?"
name="type" />
<textarea name="message"
data-placeholder="Message..."
title="Message"></textarea>
无论如何都有来自元素样式按钮的提交按钮,如下所示?
<a class="blue button" input type="submit">Everything? Send!</a>
按要求提供CSS:
.button.blue {
border: 1px solid #005998;
}
.button.blue .text {
padding: 16px 31px 14px;
text-transform: none;
text-shadow: 0 -1px 0 #022268;
}
.button.blue .normal {
background: linear-gradient(#00a7f7, #0563bb);
background: -webkit-linear-gradient(#00a7f7, #0563bb);
background: -moz-linear-gradient(#00a7f7, #0563bb);
background: -o-linear-gradient(#00a7f7, #0563bb);
background: -ms-linear-gradient(#00a7f7, #0563bb);
-pie-background: linear-gradient(#00a7f7, #0563bb);
box-shadow: 0 1px 0 #12dbff inset;
-webkit-box-shadow: 0 1px 0 #12dbff inset;
-moz-box-shadow: 0 1px 0 #12dbff inset;
-ms-box-shadow: 0 1px 0 #12dbff inset;
-o-box-shadow: 0 1px 0 #12dbff inset;
behavior: url(pie.htc);
}
.button.blue .hover {
display: none;
background: linear-gradient(#008af3, #0244a2);
background: -webkit-linear-gradient(#008af3, #0244a2);
background: -moz-linear-gradient(#008af3, #0244a2);
background: -o-linear-gradient(#008af3, #0244a2);
background: -ms-linear-gradient(#008af3, #0244a2);
-pie-background: linear-gradient(#008af3, #0244a2);
box-shadow: 0 1px 0 #12c4ff inset;
-webkit-box-shadow: 0 1px 0 #12c4ff inset;
-moz-box-shadow: 0 1px 0 #12c4ff inset;
-ms-box-shadow: 0 1px 0 #12c4ff inset;
-o-box-shadow: 0 1px 0 #12c4ff inset;
behavior: url(pie.htc);
}
答案 0 :(得分:1)
<a class="blue button" input type="submit">Everything? Send!</a>
这是完全错误的。对于表单提交按钮:
<input type="submit" class="blue-button" value="submit" />
答案 1 :(得分:1)
我不知道你是否真的理解css的概念,无论你在哪里都可以尝试:
1 - 从规则中删除.normal,未使用。
2 - 将输入提交放在表单中。
3 - 在css上订购类,比如.blue.button not button.blue(jsut to organized)
4 - .hover是一个类还是效果?如果它的效果是正确的:悬停
试试这些
答案 2 :(得分:1)
您可以尝试类似的事情;
<a class="blue_button" input type="submit"><input class="submit_button" type="submit" value="Send"></a>
您可以submit_button
给display: block; width: 100%; height: 100px; margin: none; border: none;
一个样式。px
。我建议给它一个宽度和高度class="blue button"
(固定宽度)。这未经过测试。
在为元素定义类名时留出空间会将它们视为多个类。例如,如果您使用.blue
,则表示该元素可能会在.button
和{{1}}上定义样式。