Safariで、ボタンが丸くなるのを解除したい

現在、HTMLの勉強をしております。


HTMLに

<input type="button" value="ボタン" />

と記載して、ボタンを表示しています。


ChromeやIEでは、四角いボタンが表示されるかと思うのですが、

Safariで確認すると、角が丸くなった状態で表示されてしまいます。

他のブラウザに影響を与えず、Safariで四角いボタンを表示する方法を教えてください。




safariのデフォルトＣＳＳが問題なのかと思い、CSSで　[ border-radius:0　] 等と

記述してみても効果がありませんでした。



方法をご存じでしたら、ご回答をよろしくお願いします。

No.1 回答者： ORUKA1951 回答日時： 2013/01/17 16:20

これはユーザーインターフェースに関わる部分で基本的には変更すべきではありません。

なぜなら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で行っています。

お礼日時：2013/01/22 15:42