HTML - フォームボタンのスタイリング

Question

フォームの送信ボタンのスタイルを設定しようとしています。私は 'button'タグを探していて、CSSスタイルを追加しましたが、ボタンはまだひどいデフォルトスタイルを持っています。

<button name="visit_return_button" id="visit_return_button" type="submit" class="visit_return_button"> 
Increase 
</button> 

私のCSSスタイルが動作しているが、私はまた厄介な探して境界線と背景色を取得します：

は、これは私がこれまで持っているものです。 JavaScriptについても調べていましたが、すべてのブラウザでJSが有効であるとは限りません。

#visit_return_button{ 
    width:90px; 
    height:30px; 
    position:absolute; 
    background-image: url(image/build_button.png); 
    background-repeat: no-repeat; 
    /*font-family: Tahoma, Geneva, sans-serif;*/ 
    font-size: 14px; 
    font-weight: normal; 
    color: #FFF; 
    text-align: center; 
    /*margin: auto;*/ 
    padding-top: 10px; 
    margin-top:-20px; 
} 

：ここ

は私のCSSである：以下

がボタンのイメージで、トップ1は、下の1は、そのように見えると仮定するもので、次のようになります

ありがとうございます。ありがとうございました

Answer 1

あなたは簡単にCSS3ボーダー-radiusプロパティを通して、あなたのボタンを行うことができます -

CSS

#visit_return_button{ 
    background-color:#9C8C42; 
    border: 2px solid #91782c; 
    color: #FFF; 
    text-align: center; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    padding: 10px; 
    } 

HTML

<button id="visit_return_button" type="submit">Increase</button> 

デモ： - http://jsfiddle.net/VY8xs/3/

Answer 2

ライブラリは、複数のブラウザタイプにまたがって一貫してスタイリングボタンとして適しています。 jQuery buttons、YUI Buttonsをチェックしてください。othersもあります。

Answer 3

はborder:0;のようなborderを隠そうと、あなたのニーズに合わせて背景を調整したり、背景画像を使用して、純粋なCSSと良いアイデアであるように思わborder-radiusでそれをしようとしていないのどちらか。 http://jsfiddle.net/qVkRs/1/

Answer 4

最初に、ボタンのグローバルスタイルを作成したい場合は、繰り返されるcssが多数繰り返されるすべてのボタンIDにこれらのスタイルを適用する必要があります。次に、背景のスタイルを以下のように変更します。その後、残りの部分を正しく見えるように調整することができます。

これは、サイト全体のすべてのボタンにこれらのスタイルを適用します。特定のボタンに追加のスタイルを適用する必要がある場合、または上記のいくつかを上書きする必要がある場合は、idを使用して上記のコードの下に配置します。また、ボタンタグのclass = ""属性を取り除くと、それを必要とせず、私たちが見る限りでは使用されていません。お役に立てれば。がんばろう！

Answer 5

私はあなたが境界線を削除しようとしていると思います。これはで行うことができます。

border:none; 

私はここに、元のCSSを片付けの自由ました：これはフォームであれば、それは使用する方がよいです。また

#visit_return_button{ 
    width:90px; 
    height:30px; 
    font:14px Tahoma, Geneva, sans-serif; 
    background:url(image/build_button.png) no-repeat; 
    color:#fff; 
    text-align:center; 
    border:none; /* removal of border */ 
} 

を：

<input type="button" value="Increase"/> 

ボタン用。および：

<input type="submit" value="Increase"/> 

[SUBMIT]ボタン用。

Answer 6

はちょうどここに私の解決策だボタンのボーダーと設定した背景色

background:#ffffff url('your_image.png'); 

Answer 7

を隠します。私はすべての主要なブラウザでテストしましたが、背景の画像がなくてもうまく動作します。 IE8は角を丸めません。

http://jsfiddle.net/uSphG/3/

私は念のために、いくつかのスタイルプロパティを追加しました。一部の機能は、ブラウザによって異なるデフォルト値を持ちます。

button::-moz-focus-inner { 
padding: 0 !important; 
border: none !important; 
} 

#visit_return_button{ 
display:inline-block; 
width:90px; 
padding:0; margin:0; outline:0; 
background:#9B8C47; 
background-image: url(image/build_button.png); 
background-repeat: no-repeat; 
/*font-family: Tahoma, Geneva, sans-serif;*/ 
border:1px solid #866517; 
-moz-border-radius:0.4em; 
border-radius:0.4em; 
font-size: 14px; line-height:24px; 
font-weight: normal; 
color: #FFF; 
text-align: center; 
/*margin: auto;*/ 
}