iPhoneで見るとbutton要素が角丸に！？

症状

buttonタグを使用し、下記コードを実装した際の事。

　<button type="submit" value="" name=""> 　　<img src=“xxx” alt="検索する" width="170” height=“70”> 　</button>

iPhone(iOS)で見ると、「buttonが角丸に！？」という症状が出ました。

なんで？

結論から言うと、 「appearanceプロパティが効いているから」 です。

appearanceプロパティは、ユーザーが利用するプラットフォームに応じて、 要素がその環境における標準的なUI（ユーザーインターフェース）のような外観になるよう指定する際に使用します。

解決策

appearanceをnoneすれば大丈夫！

実装

button { -<a class="keyword" href="http://d.hatena.ne.jp/keyword/webkit">webkit</a>-appearance: none;    border-<a class="keyword" href="http://d.hatena.ne.jp/keyword/radius">radius</a>: 0; }

でも…

cssはブラウザによって挙動が変わってきて、 ブラウザによってはうまくいかなくなることも。 このようにフォーム内の部品（input,textarea…）を装飾する場合は、 javasciptを使って行うそうです。 どうしてもな場合意外はjsで実装した方が良さそうです。