web-dev-qa-db-ja.com

送信ボタンにはベベルがあります私は取り除くことができません

ほとんどのブラウザ/ OSが[送信]ボタンのデフォルトとして設定しているデフォルトのベベルとボーダーを削除しようとしています。 CSSを使用して背景画像を追加すると、ボタンの背景に画像が表示されますが、ベベルはまだそこにあります。ボタンに自分の画像だけを表示させる方法はありますか？ html入力要素のsrcタグに画像パスを設定する唯一の方法はありますか？

htmlcssformsbutton
20
Graham

次のように境界線（ベベル）を削除する必要があります。

input {
    border: 0;
}
42
janhartmann

CSSで境界線属性を設定できます。私はいつも思う

  border: 1px solid black;

いい感じ。

4
kristina

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

4
Zian Choy

独自のボタン画像を使用する場合は、次のように独自のボタンを定義する必要があります。

<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;
}
2
Clayton

Cssに「background-color：transparent;」を追加するだけで、任意のimgを背景（たとえば、透明な丸い角）として使用できます。

HTML（標準の公式の「送信」ボタン）-特別なことは何もありません（コードとスタイルを混在させるのは好きではありません）：

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

次にcssで（キルボーダーとデフォルトの背景を除いて通常のリンクと同じ）

#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

1
Csiga

入力ボタンでも同じ問題が発生していました。かつて、IE8は「すぐに使える」ものが欲しかったように見えていましたが、Chromeがっかりしました！

私のためにトリックをしたCSSは：

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

ボーダー：0; 3Dベベル（境界線スタイル）を削除してから、IE8とChromeの両方でうまくレンダリングされる平らな境界線に置き換えます。

1
Ian Robertson

境界線のCSSプロパティを使用して境界線を削除できます。例えば：

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

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

1
Laurence Gonsalves

スタイルシート（またはページの<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");
}
0
Scott

Safariは、送信ボタンのスタイル設定が非常に頑固であることに注意してください。

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

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

0
alex

ボタンと送信ボタンの外観を指定できると思います。

input[type=button], input[type=submit] { border: 0 }
0
太極者無極而生

私は答えを探していて、これを見て、修正を見つけた後、量り込むことにしました。以下のすべての答えは正しく、小さな灰色の境界線がまだ表示されるまで役立ちます。

誰も言及していません：background-size：cover;

これにより、ボタンから灰色の最後のビットが削除されました。

0
Jonk