ほとんどのブラウザ/ OSがデフォルトの[送信]ボタンとして設定したデフォルトの斜面と境界線を取り除こうとしています。 CSSを使用して背景画像を追加すると、画像はボタンの背景に表示されますが、斜影はそのまま残ります。ボタンに自分の画像だけを表示させる方法はありますか? html input要素のsrcタグにイメージパスを設定する唯一の方法はありますか?サブミットボタンに斜面がありません
答えて
あなたはそうのような境界線(ベベル)を削除する必要があります。
input {
border: 0;
}
あなたは国境はCSSの属性を設定することができます。私はいつも考えています
border: 1px solid black;
いいね。
ボタンの外観を変更することはお勧めしません。これは、ウェブサイト上の他のボタンの外観と一致しないため、ユーザーが送信ボタンとして見つけて認識するのが難しくなるためです。本当に進めたいのであれば、ユーザビリティテストをすることを強くお勧めします。
独自のボタン画像を使用したい場合は、あなたがあなた自身のボタンを定義する必要があります、このように:
<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;
}
あなたは国境を削除することができます境界CSSプロパティを使用します。たとえば、次のように
<input type=button value="Hello" style="border:0">
(あなたはもちろん、あなたのスタイルシートにこれを移動することができます。)
あなたはスタイルシートに次の(またはページ上の<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");
}
サファリはスタイリング送信ボタンで非常に頑丈です。
<button type="submit"></button>
より柔軟です。しかし、フォームに複数のボタンを使用している場合、IE6には問題があります。 IEはボタン要素のinnerHTML
も送信しますが、Firefoxはvalue
属性を送信します(それは私にとって意味があります)。
私はあなたがどのようにボタンを指定してのように見えるボタンを提出することができると思う:
input[type=button], input[type=submit] { border: 0 }
あなただけの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
入力ボタンで同じ問題が発生していました。一度IE8が出てきたように、私は「アウト・オブ・ザ・ボックス」を望んでいました。そしてそれは失望したChromeでした!私のためのトリックをした
CSSは:
input[type="button"] {
border: 0;
border-width: 2px;
border-color: white;
border-style: solid;
}
ボーダー:0; 3Dベベル(ボーダースタイル)を削除してから、IE8とChromeの両方でうまくレンダリングするフラットな見た目のボーダーに置き換えます。
- 1. PHPフォームのサブミットボタンがありません
- 2. 敵と斜面
- 3. serializeArrayにサブミットボタンの値が含まれていません
- 4. デスクトップ画面のブートストラップnavbarにリンクがありません
- 5. Django 1.8正面にモジュールがありません
- 6. UIAutomation Instrument Exception "対象アプリが最前面にありません"
- 7. Android KitKat:Snackbarが画面の一番下にありません
- 8. UITabBarControllerへのログイン画面にナビゲーションリンクがありません
- 9. "Float:right"がサブミットボタンに適用されていません
- 10. djangoのソーシャル認証のFacebookログイン画面がありません
- 11. python txtファイルがありません。データがありません
- 12. ramdaドキュメンテーションマップがありませんコンマがありません
- 13. Silverlightグリッドには片面にグリッド線がありますが、他のグリッド線はありません
- 14. リーダーボードが画面に追加されることはありませんが
- 15. wit.aiにはドキュメントがありません:ステータス管理がありません
- 16. 私のリストビューは画面に表示されませんが、すべてが問題ありません。
- 17. Android:画面の下部に2つのボタンがありません
- 18. vtkFiltering.dllがありません
- 19. ロードプラグインがありません
- 20. ...アクセサメソッドがありません
- 21. イメージデータがありません
- 22. スウィフトファイルがありません
- 23. リッスンエンドポイントがありません
- 24. テンプレートがありません
- 25. MSVCR90D.dllがありません
- 26. conda.exeがありません
- 27. ブートストラップドロップダウンメニューがありません
- 28. サーバーレスイベントがありません
- 29. エンティティデータモデルウィザードがありません
- 30. デバッグボタンがありません
なぜこれが投票されたのですか? – alex
UIに関する良いアドバイスに応答してUpvoted。質問に答えることはできませんが、間違いなく助言に値すると思います。 –
+1私からも、私は言及すべきです。それは有効なポイントです。しかし、時にはクライアントはただ笑いを浮かべません。 – alex