htmlでコーディングをしています。
ボタン作成の部分で、どうしても解決できないことがあり、
投稿させて頂きました。
大変お手数ですが、ご教授頂けたらと思います。
input typeが「submit」のボタンに、画像を重ねて、機能はそのままにうまく配置するところまで
できました。
ところが、Iceweaselというブラウザで見るとボタンの枠線は消えているのですが、
IE(バージョン11)で見ると、添付の画像のように、枠線が表示されてしまいます。
問題のボタンのhtml側とcss側の記載は以下の通りです。
※<br>のタグは見易くするため、以下では省略しています。
***************************************************
【html側】
<button input type="submit" value="検索"><img src="button_suche.gif" border="0"></button>
<button input type="submit" value="決定"><img src="button_bestimmen.gif" border="0" style="width: 75px; height: 30px; margin-right:200px"></button>
<button input type="button" value="全選択" onclick="chkAll_form(true)" /><img src="button_allegewaehlt.gif" border="0"></button>
<button input type="button" value="全解除" onclick="chkAll_form(false)" /><img src="button_ganzefreilassung.gif" border="0"></button>
【css側】
button{
/*width: 75px;*/
/*height: 30px;*/
width:auto;
padding:0;
margin:0;
background:none;
border:none;
font-size:0;
line-height:0;
overflow:visible;
cursor:pointer;
}
***************************************************
なお、Iceweasel側でも、枠線は消えているのですが、
クリックすると、iEで伸びている分(margin-right:200pxの分)も含めた
幅の点線が表示されます。
またIE側は、そういうコーディングはしていないのに、
ボタンのマウスを充てると、まわりの枠が水色に反転します。
※添付の図の「決定」ボタンの状態です。
どのようにすれば、IE側のこの枠は消えるのでしょうか。
No.1ベストアンサー
- 回答日時:
ユーザビリティのために、点線枠は表示されます。
どのブラウサでもそうなるはずです。
これは、マウスではなく障害者がタブキーでフォーカスを移動した時にどこが現在地かを示す重要なインターフェースです。
★ですから、消すのは望ましくありません。健常者だけがサイトを利用するわけじゃない!!
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
それを消したければ
onfocus=”this.blur()"
また、
botton{outline:none;}
しかし、それは残しておくことを強くお勧めします。
ORUKA1951様
ご回答ありがとうございます。
すいません、ご指摘の通り、見た目のことばかり考えていて、
使う人のことまで考えが及んでいませんでした。
技術者としては、重要なことですよね。
ありがとうございます。
また、解決策についてもご教示頂き、ありがとうございました!
大変参考になりました。
今のままにしておきますが、こういうやり方もあるとうことで、勉強させて頂きます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像のサイズが変わらない
-
リンクを知らせる手のマークが...
-
UDP通信を使うチャットプログラ...
-
画像をラジオボタンとして使用...
-
HTMLの文章中の画像のベースラ...
-
水面の波紋
-
ボタンをセル内一杯に表示させ...
-
imgとpを縦・横に中央揃えする
-
画像とテーブルの隙間をなくす。
-
【ヒトの神秘】美男美女から何...
-
CSSでつくったメニューのアニメ...
-
htmlの文字が縦書きになる
-
還暦を過ぎた方々に質問です。
-
<h1>、<h2>と<p><div>の行間を...
-
<div>の中の<div>の意味
-
heaerとfooterに背景画像が難し...
-
ul li を使ったリストを作りた...
-
CSSのposition値の上書き(打消...
-
「諸要素」とはどういう意味で...
-
CSSで「overflow:scroll」をしてい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
UDP通信を使うチャットプログラ...
-
ポップアップウィンドウのサイ...
-
プルダウンの選択リストの中に...
-
htmlで画像を2個ずつ並べていき...
-
ホームページビルダーの画像サ...
-
XML画像データををHTMLで簡単に...
-
画像のサイズが変わらない
-
画像の場合のみ、下線を消す方...
-
リンクを選択したときの青い枠...
-
レスポンシブ対応のHTML・CSS(...
-
footerの背景が切れて、背景画...
-
html+CSSのみで作るスライドショー
-
ホームページタグ打ち。サイズ...
-
画像の横に文字をうまく配置で...
-
水面の波紋
-
ホームページで画像を横に並べ...
-
【HTML/CSS】ボタンの枠が伸び...
-
HTMLのIMAGEに。。
おすすめ情報