5

フォームの送信ボタンのスタイルを設定しようとしています。「ボタン」タグを調べて、CSS スタイルを追加しましたが、ボタンにはまだ恐ろしいデフォルト スタイルがあります。

これは私がこれまでに持っているものです:

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

私のCSSスタイルは機能していますが、見栄えの悪い境界線と背景色も得られます。私も JavaScript を調べていましたが、すべてのブラウザーで JS がアクティブになっているわけではないという考えは好きではありません。

以下はボタンの画像です。上の画像はその外観、下の画像は想定される画像です。

ここに画像の説明を入力

これが私のCSSです：

#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;
}

助けていただければ幸いです、ありがとう

4

7 に答える 7

2

border好きなものを隠してborder:0;背景をニーズに合わせて調整するか、背景画像を使用せずに純粋な css を使用してみてくださいborder-radius。これはより良いアイデアと思われます。http://jsfiddle.net/qVkRs/1/を参照してください

于 2012-04-15T18:10:56.563 に答える
1

まず、ボタンのグローバルスタイルを作成します。そうしないと、多くの繰り返しcssになるすべてのボタンIDにそれらのスタイルを適用する必要があります。次に、背景スタイルを次のように変更します。その後、残りの部分を調整して正しく見えるようにします。

input[type="button"], input[type="submit"], button
{
     background: none;
     background-image: url(image/build_button.png);
     background-position: center center;
     background-repeat: no-repeat;
     border: 0px;
     /* add the rest of your attributes here */
}

これにより、これらのスタイルがサイト全体のすべてのボタンに適用されます。特定のボタンに追加のスタイルを適用する必要がある場合、または上記の一部をオーバーライドする必要がある場合は、IDを使用して、上記のコードの下に配置します。また、ボタンタグのclass = ""属性を削除します。これは不要であり、私たちが見る限り使用されていません。お役に立てれば。幸運を！

于 2012-04-15T18:18:23.403 に答える
0

CSS3 Border-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/

于 2012-04-16T08:57:20.863 に答える
0

あなたは国境を取り除こうとしていると思います。これは次の方法で実行できます。

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ボタン用。

于 2012-04-15T18:25:09.937 に答える
0

ボタンの境界線を非表示にし、背景色を設定するだけです

background:#ffffff url('your_image.png');
于 2012-04-15T18:27:40.957 に答える
0

これが私の解決策です。すべての主要なブラウザーでテストしましたが、背景画像がなくても問題なく動作します。ただし、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;*/
}
于 2012-04-15T18:29:43.817 に答える
-2

ライブラリは、多くの場合、複数のブラウザタイプで一貫してボタンのスタイルを設定するための優れたソリューションです。jQueryボタン、YUIボタンをチェックしてください。他にもたくさんあります。

于 2012-04-15T18:09:14.523 に答える