入力・送信ボタンにCSSでスタイルを与えるには？

Question

さらに

ソース非AMP版編集

入力・送信ボタンにCSSでスタイルを与えるには？

CSSを勉強中です。入力ボタンや送信ボタンをCSSでスタイリングする方法を教えてください。

私はこのようなものを作ろうとしていますが、どのようにすればいいのかわかりません。

<form action="#" method="post">
    Name <input type="text" placeholder="First name"/>
    <input type="text" placeholder="Last name"/>
    Email <input type="text"/>
    Message <input type="textarea"/>
    <input type="submit" value="Send"/>
</form>

.

プログラミング

html css

11日 6月 2013 в 10:44

17 ビュー

Monkey D Luffy · Answer 1 · 2013-06-11T10:48:12+00:00

他のhtml要素と同じようにSubmitボタンのスタイルを設定するだけです。 CSS属性セレクタを使用して、異なるタイプの入力要素をターゲットにすることができます。

例えば、次のように記述します。

input[type=text] {
   /*your styles here.....*/
}
input[type=submit] {
   /*your styles here.....*/
}
textarea{
   /*your styles here.....*/
}

他のセレクタと組み合わせて使う。

input[type=text]:hover {
   /*your styles here.....*/
}
input[type=submit] > p {
   /*your styles here.....*/
}
....

ここでは、動作する[例][1]を示します。

Jayram · Answer 2 · 2013-06-11T10:46:40+00:00

Jayram

ソース非AMP版編集

HTML

<input type="submit" name="submit" value="Send" id="submit" />

CSS

#submit {
 color: #fff;
 font-size: 0;
 width: 135px;
 height: 60px;
 border: none;
 margin: 0;
 padding: 0;
 background: #0c0 url(image) 0 0 no-repeat; 
}

23

0

解説 (0)

eis · Answer 3 · 2013-06-11T10:47:32+00:00

フォーム要素のUIは、ブラウザやOSによってある程度コントロールされているため、一般的なブラウザとOSの組み合わせで同じように見えるように、信頼性の高いスタイルを作ることは容易ではありません。

その代わり、何か特別なことをしたいのであれば、スタイリング可能なフォーム要素を提供するライブラリを使うことをお勧めします。uniform.jsはそのようなライブラリの一つです。