• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
mocurot nort

mocurot nort

  • Contents
  • About
  • Contact

iOS版Safariで検索フィールドのスタイルをリセット

2018-04-04 by mocurot コメントを書く

inputタグのtype属性でtype=”search”を指定すると、検索テキストフィールドが作成される。iOS版のSafariで、このtype=”search”をCSSで整形してものテキストフィールドをうまくコントロールできないことがある。

searchのtype属性を持つinputタグを整形するためのCSSをメモ。

inputのスタイルをリセット

iOS版のSafari独自の解釈でスタイリングされているinputタグのCSSを整形しよう。

Compassでリセットする

  • @include box-sizing(border-box)を指定する。
  • -webkit-appearance: none;を指定する。
  • 疑似要素-webkit-search-decorationにdisplay:noneを指定する。
input[type="search"] {
  @include box-sizing(border-box);
  -webkit-appearance: none;
  &::-webkit-search-decoration {
  display: none;
  }
}

以上の指定でコンパイルすればOK。

CSSでリセットする

  • -moz-box-sizing: border-box;を指定する。(Firefox用)
  • -webkit-box-sizing: border-box;を指定する。(Safari,Chrome用)
  • box-sizing: border-box;を指定する。
  • -webkit-appearance: none;を指定する。(Safari,Chrome用)
  • 疑似要素-webkit-search-decorationにdisplay:noneを指定する。
input[type="search"] {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration {
  display: none;
}

この指定が読み込まれるとリセットされる。

表示確認

スタイルを適用する前と適用後の比較。思い通りの表示になった。

適用前

適用後


補足

Safari,Chrome用、Firefox用と、ベンダープレフィックスを書いているが、モダンブラウザ(最近のWebブラウザ)のCSS3のプロパティはベンダープレフィックスなしでも問題ない。
IE以外のブラウザは、次々とアップデートされているので、ベンダープレフィックスなしでCSS3のプロパティを認識するのが現状だ。

この辺の事情を踏まえて、適宜ベンダープレフィックスを使用したい。

関連

Filed Under: Notes, Sass 関連タグ:CSS, SASS

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最初のサイドバー

Author

NAME : mocurot
the mocuLogの管理人。フロントエンドエンジニア、バックエンドも少々。
Mac、iPhone、Kindle、Guitar、NINTENDO、SONY、FromSoftwareに関心を示します。

  • GitHub
  • RSS
  • Tumblr
  • Twitter
  • Youtube

Recommended Articles

  • MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
    MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
  • input,textareaのCSSをリセット -iOS Safari -
    input,textareaのCSSをリセット -iOS Safari -
  • ios safariでのスクロールバー表示について
    ios safariでのスクロールバー表示について
  • 6ヶ月プロテインダイエットをしてみて
    6ヶ月プロテインダイエットをしてみて
  • Sassの初期設定〜コンパイル
    Sassの初期設定〜コンパイル
  • CatalinaでEmacsのファイルアクセスを許可する方法
    CatalinaでEmacsのファイルアクセスを許可する方法
  • underscoresでWordPressのテーマを作る1(導入)
    underscoresでWordPressのテーマを作る1(導入)
  • ダークソウル リマスター版 公爵の書庫 アヴェリンの取り方
    ダークソウル リマスター版 公爵の書庫 アヴェリンの取り方

タグ

AMAZON ANKER APPLE APPLE WATCH APPS BLOOD BONE CAMERA CENT OS COMPASS CSS DARK SOULS DB DESIGN DIET EMMET GADGET GIT GITHUB GUITAR GULP HTML IPHONE KINDLE LEMP MAC MUSIC NGINX NINTENDO NODE.JS NOTE PHP PS4 PYTHON SASS SCSS SEKIRO SERVER SWICH WORDPRESS _s
プライバシーと Cookie: このサイトは Cookie を使用しています。このサイトの使用を継続することで、その使用に同意したとみなされます。
Cookie のコントロール方法を含む詳細についてはこちらをご覧ください。 Cookie ポリシー

Copyright © 2021 mocurot ・ ログイン