share facebook facebook twitter menu hatena pocket slack

2019.05.07 TUE

Safariでinput type=”search” にスタイルが当たらない

工藤 響己

WRITTEN BY 工藤 響己


Safariで<input type="search"> にスタイルが当たらないバグがあります1

<input class="search--field" type="search" placeholder="キーワードから探す" />
.search--field {
    box-sizing: border-box;
    width: 180px;
    height: 40px;
    padding-left: 10px;
    border: solid 2px red;
}

なんでや! 直接style属性をいじっても !importantをつけても効果なし…。

.search--field {
    box-sizing: border-box;
    width: 180px;
    height: 40px;
    padding-left: 10px;
    border: solid 2px red;
    -webkit-appearance: textfield; /*これを追加*/
}

-webkit-appearance: textfield; を書き加えてあげると、期待通りの表示になりました。

この記事この記事を見ると2010年から放置されてるみたいですね…


1.バージョン12.1 (14607.1.40.1.4) で発生を確認

元記事はこちら

Safariでinput type=”search” にスタイルが当たらない

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。