現在、HTMLの勉強をしております。
HTMLに
<input type="button" value="ボタン" />
と記載して、ボタンを表示しています。
ChromeやIEでは、四角いボタンが表示されるかと思うのですが、
Safariで確認すると、角が丸くなった状態で表示されてしまいます。
他のブラウザに影響を与えず、Safariで四角いボタンを表示する方法を教えてください。
safariのデフォルトCSSが問題なのかと思い、CSSで [ border-radius:0 ] 等と
記述してみても効果がありませんでした。
方法をご存じでしたら、ご回答をよろしくお願いします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
これはユーザーインターフェースに関わる部分で基本的には変更すべきではありません。
なぜならsafariを使用しているユーザーは、送信ボタンがどのような形状かを知っているわけですからね。これは他のユーザーインターフェース--ポインターの形状とかスクロールバーの形状と同様、常識として著者が弄らないほうがよいとされています。
どうしても変更したいなら、input[type="button"]{display:block;border:outset 2px gray;}のように他のタイプに変更してください。
ですが、決してすべきでないことを理解してくださいね。所詮スタイルシートを理解しないユーザーエージェントには意味ないことですから・・。IE,safari,opera,chromeだけじゃないのですよ。Lynxもあるし点字端末もスクリーンリーダーも・・
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
ご回答ありがとうございます。
冒頭でおっしゃられていることは理解できるのですが、
ブラウザ毎に、画面レイアウトが異なるのは、開発者がメンテナンスしづらいということと、お客様からも、「Androidと、ipnoneで、画面イメージが違う」と、クレームがあったための、今回の質問でした。
ちなみに、ブラウザに関していえば、スマートフォンを対象としていますので、chrome、safariで動作すれば十分です。
そして、ご提示頂いているCSSですが、設定しても効果がありませんでした。動作確認はIphone5で行っています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- その他(ブラウザ) Twitterの「返信をさらに表示」 ボタンの後ろに隠れているツイートを常に表示 1 2023/08/04 12:20
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- その他(動画サービス) Tver アンケートに回答しても視聴できない(何度もアンケート画面が開く) 1 2023/01/13 21:47
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlとcssのデザインについて
-
自動で携帯サイズに変換するには?
-
Safariで、ボタンが丸くなるの...
-
スマホ横幅が720px だけ 横が...
-
ホームページ、iPadやiPhoneで...
-
デザインとコーディングは同一...
-
XML → HTML の確認方法
-
検索順位に詳しい方
-
IE8は切り捨てても構わないのか
-
HTMLからフォルダを開きたい
-
Excelで、社外秘(閲覧のみ)と...
-
リンク先からリンク元の、同じ...
-
iPadの標準ブラウザでローカルH...
-
HTMLページが勝手にダウンロー...
-
ファイルをダウンロードすると...
-
POSTしたデータの文字コードがu...
-
javaでhtmlファイルを開く方法
-
HTMLテンプレートの販売について
-
メールに添付されたhtmlファイ...
-
エクセルで作成した表にgifの画...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ホームページ、iPadやiPhoneで...
-
リンクの下線は消すのが普通?
-
ホームページを作っているので...
-
ガラケーサイトの一般的な画面...
-
画面は固定と可変のどちらがい...
-
WEB会社に勤めている方に質...
-
スマホ横幅が720px だけ 横が...
-
PCサイトとは何ですか。
-
コーディング代行について
-
デジタルフィルタの伝達関数
-
DOMとHTMLの本
-
スマートフォン用のサイト作成...
-
Webサイトを作成する前のイメー...
-
iphone/android WEB制作について
-
Safariで、ボタンが丸くなるの...
-
Windowsホームページ作成MACで...
-
平均的なウィンドウサイズとは?
-
レスポンシブwebデザインでのIE...
-
厳しいご意見を下さい!
-
バリアフリーなサイトで、フレ...
おすすめ情報