iOSのボタンデザインを無効化する方法

カテゴリ：iOS対応

iPhoneやiPadなどのiOSでは、初期設定でボタンにiOSオリジナルの装飾が施されます。そのためもしボタンのデザインをCSSで変更していても、初期設定では反映されません。

これだけではボタンデザインが反映されない：

<html>
    <head>
        <title>Test Page</title>
	<style>
	.button {
	    background: tomato;
	    color: white;
	    border: 1px solid tomato;
	    padding: 10px;
	    font-size: medium;
	    font-weight: bold;
	    border-radius: 5px; /* CSS3 */
	}
	</style>
    </head>
    <body>
        <form name="test">
        <p>
        <input class="button" type="submit" value="登録" name="submit" />
        <input class="button" type="reset" value="リセット" name="reset" />
        </p>
	</form>
    </body>
</html>

iOS上での表示：

iOSのボタンデザインを無効化するには以下のように各ボタンタイプに対して-webkit-appearance: none;を指定します。

input[type="button"],input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
}

上記を指定しておけば、CSSで設定したボタンデザインが反映されるようになります。

これでボタンデザインが反映される：

<html>
    <head>
        <title>Test Page</title>
	<!-- これを追加 -->
	<style>
	input[type="button"],input[type="submit"], input[type="reset"] {
	    -webkit-appearance: none;
	}
	</style>
	<style>
	.button {
	    background: tomato;
	    color: white;
	    border: 1px solid tomato;
	    padding: 10px;
	    font-size: medium;
	    font-weight: bold;
	    border-radius: 5px; /* CSS3 */
	}
	</style>
    </head>
    <body>
        <form name="test">
        <p>
        <input class="button" type="submit" value="登録" name="submit" />
        <input class="button" type="reset" value="リセット" name="reset" />
        </p>
	</form>
    </body>
</html>

iOS上での表示：

以上、iOSのボタンデザインを無効化の方法についてでした。

公開日時：2020年03月22日 09:58:12