SafariのボタンにCSSを適用させデフォルトの枠線を消す

CSS

CSSが適応されずデフォルトの枠線が表示される不具合

iPhoneなどで閲覧した際に、上手くCSSが適用されていなかったり変な枠線が表示されたことはありませんか?
誰もが出会ったことのある現象かと思います。

See the Pen Untitled by asbgm (@asbgm12) on CodePen.

CSSを適用させボタンに表示されるデフォルトの枠線を消す方法

CSSに以下の4行を加えるだけで、Safariで適用される自動のデザインをリセットさせ期待通り正しく表示されます。

See the Pen Untitled by asbgm (@asbgm12) on CodePen.

HTML

入力フォームとボタンの例です。
以下の例では、入力は必須で最大20文字まで入力可能となります。

<form action='./index.php' method='post'>
  <input type="text" id="name" name="name" required maxlength="20">
  <button type='submit' name='list' class='button'>送信</button>
</form>

CSS

.button {
  /* デフォルトの枠線を消す */
  -webkit-appearance: button;
  *overflow: visible;
  border: none;
  outline: none;

 /* デザインの例 */
  display: inline-block;
  border-radius: 25px;
  font-size: 10px;
  text-align: center;
  cursor: pointer;
  padding: 0px 5px;
  line-height: 15px;
  user-select: none;
  color: #999;
}

PHP

POSTされた値は以下のように記述すれば受け取ることができます。

<?php
// POSTされた値を受け取る
$name = $_POST["name"];
echo $name;
?>

コメント

タイトルとURLをコピーしました