10

「送信」ボタンの「デフォルト」スタイルがかなり見栄えがする理由(角がわずかに丸みを帯びている、上から下へのグラデーションなど)を誰かが知っているかどうか疑問に思いますが、背景色を追加すると、1990年代に変わります。 2pxの境界線のある正方形のボタン...ただひどいように見えます。

どういうわけか、デフォルトのスタイルのほとんどを維持しながら、背景色を変更できますか?ありがとうございました!

4

4 に答える 4

4

ブラウザには、Webサイトでスタイルが設定されていない場合に見栄えを良くするために、デフォルトのスタイルの大きなセットが付属しています。たとえば、Firefoxには、デフォルトの送信ボタンに対して次のスタイルが定義されています。

input[type="submit"] {
    -moz-appearance: button;
    -moz-binding: none;
    -moz-box-sizing: border-box;
    -moz-user-select: none;
    background-color: buttonface;
    border: 2px outset buttonface;
    color: buttontext;
    cursor: default;
    font: -moz-button;
    line-height: normal;
    padding: 0 6px;
    text-align: center;
    text-shadow: none;
    white-space: pre;
}

-moz-appearanceは非標準のプロパティであり、オペレーティングシステムのデフォルトのボタンスタイルと一致するようにスタイルを定義します。そのため、オペレーティングシステムによっても外観が異なります。

于 2012-12-31T17:15:06.413 に答える
2

「問題」は、デフォルトの背景が非常に複雑なグラデーションであるということです。

ボタンを設計するには、 jQueryUIBootstrapなどのフレームワークを使用することをお勧めします。これははるかに簡単で、ボタンの独自の背景グラデーションを検索するよりも、おそらくより良い結果が得られます。

于 2012-12-31T17:02:18.183 に答える
2

(最新の)ブラウザ(またはbootstrapのようなcssフレームワーク)には、送信ボタンのデフォルトのスタイルが含まれています(したがって"pretty good (corners slightly rounded, some gradient from top to bottom, etc.)"、1990年代のボタンのようには見えません)。

cssでこれらのグラデーションを(を変更してbackground-color)オーバーライドすると、ブラウザーが使用していたプログラムされたデフォルトがオーバーライドされます。背景色を変更するだけでなく、独自のグラデーションを作成できます。また、@ŠimeVidasがコメントで指摘しているように、背景色を変更するとデフォルトも削除されますborder-style

単に変更するのではなく、グラデーションジェネレータを使用することをお勧めしbackground-colorます。

于 2012-12-31T17:03:12.503 に答える
2

ほんの少しのCSSで美しいボタンを作ることができます。これらの参考資料を確認してください。

http://webdesignerwall.com/tutorials/css3-gradient-buttons

http://css3button.net/

于 2012-12-31T17:21:55.130 に答える