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"><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 に答える
1

css の概念を本当に理解しているかどうかはわかりません。いずれにしても、ここで試すことができます。

1 - ルールから .normal を削除します。使用されません。

2 - 入力送信をフォーム内に配置します。

3 - .blue.button ではなく button.blue(jsut を整理する) のように、CSS でクラスを注文します。

4 - .hover はクラスですか、それともエフェクトですか? その効果が正しい場合は :hover

これらを試してください

于 2013-01-25T19:01:53.740 に答える
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 に答える