0

我尝试为我的简单联系表单制作一个自定义提交按钮，因为我想用 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);
}
4

3 回答 3

1 
<a class="blue button" input type="submit">Everything? Send!</a>

这是完全错误的。对于表单提交按钮：

<input type="submit" class="blue-button" value="submit" />
于 2013-01-25T18:48:03.537 回答
1

我不知道您是否真的了解 css 的概念，您可以尝试以下任何一种方式：

1 - 从规则中删除 .normal ，它没有被使用。

2 - 将输入提交放在表单中。

3 - 在 css 上排序类，比如 .blue.button 不是 button.blue（jsut 来组织）

4 - .hover 是一个类还是效果？如果它的效果正确的是：悬停

试试这些

于 2013-01-25T19:01:53.740 回答
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。

于 2013-01-25T19:22:22.233 回答