web-dev-qa-db-ja.com

HTMLフォームボタンをCSSでスタイルできますか？

デフォルトのボタンスタイルが好きではありません。それは本当に退屈です。私は使っている

<input type="submit">

タイプボタン。これらをCSSで何とかスタイルできますか？そうでない場合、それを行う別の方法は、代わりにdivを使用し、それをリンクにすることだと思います。それらをフォームでどのように機能させるのですか？

htmlcssforms
27
Alex Mohr

あなたはCSSで簡単に希望を達成できます：-

[〜＃〜] html [〜＃〜]

<input type="submit" name="submit" value="Submit Application" id="submit" />

[〜＃〜] css [〜＃〜]

#submit {
    background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:6px;
    color: #fff;
    font-family: 'Oswald';
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
}



#submit:hover {
    border: none;
    background:red;
    box-shadow: 0px 0px 1px #777;
}

[〜＃〜] demo [〜＃〜]

46
Shailender Arora

ええ、それは非常に簡単です：

input[type="submit"]{
  background: #fff;
  border: 1px solid #000;
  text-shadow: 1px 1px 1px #000;
}

より簡単にターゲット設定できるように、IDまたはクラスを指定することをお勧めします。

17
ncksllvn

はい、input[type=submit]を使用して特定のターゲットを設定できます。

.myFormClass input[type=submit] {
  margin: 10px;
  color: white;
  background-color: blue;
}
3
Dave Anderson

この方法で、独自のスタイルを直接作成できます。

 input[type=button]
 { 
//Change the style as you like
 }
3
Ricky Youssef

以下を追加できます。

-webkit-appearance: none;

mobile Safariで一貫して見える必要がある場合...

1
achoukah

以下のスタイルを同じhtmlファイルのヘッドセクションに書き込むか、.cssファイルに書き込みます

<style type="text/css">
.submit input
    {
    color: #000;
    background: #ffa20f;
    border: 2px outset #d7b9c9
    }
</style>

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

.submit-in css。 classを意味するので、一連の属性を持つsubmitクラスを作成しました
クラス属性を使用して、そのクラスを送信タグに適用しました

0
Raj Adroit