0

メール入力用のテキストボックスとボタンを備えたフォームがあります。ここでは、ボタンは技術的には HTMLbuttonです。フォームの HTML は次のようになります。

<form class="form-wrapper cf">
  <input type="text" placeholder="Enter your email here..." required>
  <button type="submit">
    Submit
  </button>
</form>

JSFiddle コード: http://jsfiddle.net/ahmadka/aDhUL/

現在の CSS をすべて保持しながら、button type="submit"コントロールをに変換して、視覚的に変更がないようにしたいと思います。input type="submit"CSSを更新する必要があると思います。これを自分でやろうとしましたが、CSS を正しく更新できませんでした。

誰かがこれで私を助けてくれますか?

4

4 に答える 4

1

基本的な解決策では、CSS のあらゆる場所で以下を変更する必要があります

button -> input[type=button]
input -> input[type=text]

タグ名を参照する代わりに、CSS クラスを追加することをお勧めします。

<input type="text" class="text" />
<input type="submit" class="btn" />

それには、CSS のあらゆる場所で以下を変更する必要があります

button -> input.btn
input -> input.text

これは完全には完成していませんが、ほとんど動作しますhttp://jsfiddle.net/aDhUL/7/

問題は、input:beforeディレクティブが入力内に要素を挿入することです。には許可されていますが、子要素を持つことができないため、には許可buttonされていません。http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/inputinput

そのため (:before を使用する場合)、ボタンに戻る必要があります。テキスト フィールドとボタンの間にスパン要素を挿入しても、矢印とボタンの両方にホバー効果を持たせることはできません。

input type="submit"そもそもなんで使いたいの？

于 2013-07-09T19:17:59.037 に答える
0

CSSを編集する必要があります。怠け者にならないでください:)

<form class="form-wrapper cf">
  <input type="text" placeholder="Enter your email here..." required>
  <input type="submit" class="btn" value="submit">
</form>

CSS

.btn{
color:green;
}

CSSでクラスを追加した後にも使用できるようになりました

<form class="form-wrapper cf">
  <input type="text" placeholder="Enter your email here..." required>
  <button type="submit" class="btn">Button</button>
</form>
于 2013-07-09T19:12:24.803 に答える