サブミットボタンに斜面がありません

Question

ほとんどのブラウザ/ OSがデフォルトの[送信]ボタンとして設定したデフォルトの斜面と境界線を取り除こうとしています。 CSSを使用して背景画像を追加すると、画像はボタンの背景に表示されますが、斜影はそのまま残ります。ボタンに自分の画像だけを表示させる方法はありますか？ html input要素のsrcタグにイメージパスを設定する唯一の方法はありますか？

Answer 1

あなたはそうのような境界線（ベベル）を削除する必要があります。

input { 
    border: 0; 
} 

Answer 2

あなたは国境はCSSの属性を設定することができます。私はいつも考えています

border: 1px solid black; 

いいね。

Answer 3

ボタンの外観を変更することはお勧めしません。これは、ウェブサイト上の他のボタンの外観と一致しないため、ユーザーが送信ボタンとして見つけて認識するのが難しくなるためです。本当に進めたいのであれば、ユーザビリティテストをすることを強くお勧めします。

Answer 4

独自のボタン画像を使用したい場合は、あなたがあなた自身のボタンを定義する必要があります、このように：

<div class="button"> 
    <a href="#">Login</a> 
</div> 

とCSS：

div.button 
{ 
    position: relative; 
    display: block; 
    float: left; 
    margin: 0; 
    border: 0; 
    padding: 0; 
    background: url(button_right_normal.gif) no-repeat right top; 
} 

div.button a 
{ 
    position: relative; 
    display: block; 
    margin: 0; 
    border: 0; 
    padding: 2px 15px 5px 15px; 
    height: 18px; 
    background: url(button_left_normal.gif) no-repeat left top; 
    color: #ffffff; 
    font-size: 11px; 
    text-decoration: none; 
} 

Answer 5

あなたは国境を削除することができます境界CSSプロパティを使用します。たとえば、次のように

<input type=button value="Hello" style="border:0"> 

（あなたはもちろん、あなたのスタイルシートにこれを移動することができます。）

Answer 6

あなたはスタイルシートに次の（またはページ上の<style>...</style>タグで内）のような何かをすることができますし、いくつかの高度なCSSを使用セレクタ：

input[type=submit], input[type=button], /* Advanced CSS selectors */ 
input.button /* For older browsers you can add a 'button' class to each button where you want a bkg img */ 
{ 
    border: 0; 
    background-image: url("/images/foo.png"); 
} 

Answer 7

サファリはスタイリング送信ボタンで非常に頑丈です。

<button type="submit"></button> 

より柔軟です。しかし、フォームに複数のボタンを使用している場合、IE6には問題があります。 IEはボタン要素のinnerHTMLも送信しますが、Firefoxはvalue属性を送信します（それは私にとって意味があります）。

Answer 8

私はあなたがどのようにボタンを指定してのように見えるボタンを提出することができると思う：

input[type=button], input[type=submit] { border: 0 } 

Answer 9

あなただけのCSSの追加「の背景色に、（例えば透明角丸）背景としてANY IMGを使用することができます。トランスペアレント;"

HTML（標準公式ボタンを「提出」） - 何も特別な（私はスタイルでコードを混在好きではない）：CSS（国境を殺す以外は、通常のリンクと同じで、デフォルトでは、その後

<input type="submit" name="submit" id="mystyle" value="send e-mail"/> 

背景）

#mystyle { 
background-color: transparent; 
border-top-style: none; 
border-right-style: none; 
border-bottom-style: none; 
border-left-style: none; 
} 

あなたが設計したCSSを使用して、オフラインの送信ボタンのようなCSSを使用しないでください。

テスト済み：Chrome、IE、Opera

Answer 10

入力ボタンで同じ問題が発生していました。一度IE8が出てきたように、私は「アウト・オブ・ザ・ボックス」を望んでいました。そしてそれは失望したChromeでした！私のためのトリックをした

CSSは：

input[type="button"] { 
    border: 0; 
    border-width: 2px; 
    border-color: white; 
    border-style: solid; 
} 

ボーダー：0; 3Dベベル（ボーダースタイル）を削除してから、IE8とChromeの両方でうまくレンダリングするフラットな見た目のボーダーに置き換えます。