にしのクエスト2

情報処理技術者試験と資格学校講師の日常

20240615101703

まめ電機(TIPS)  2 CSSがiPhoneで効かない件

まめ電機の時間です。

夫さんこと、かしの電機が、仕事で気がついたこと。ちょっと
思いついたこと。これは便利だなって思ったことを気ままに書
いてみるコラムです。(不定期更新)

CSSはAppleの素敵なパーツに置き換えられる

HTMLでたとえばフォームを書いたとします。

(CSS側)

select{
    width:150px;height100:px;font-size:16pt;
}


(HTML側)

<select class="select" Label="好きな色を選択"size="1">
        <option label="赤" value="赤" selected>赤</option>
        <option label="青" value="青">青</option>
        <option label="黄" value="黄">黄</option>

これだと、iPhoneでの表示はこんな感じになります。
どんなにCSSで凝ったデザインにしてもです・・・
これは結構困ったんですよね・・・



こんなふうにすると直るお

select{
    -webkit-appearance:none;
    apperance:none;
    width:150px;height100:px;font-size:16pt;
}

このようにして、iPhoneのパーツ(正確にはSafari)
を打ち消す記述をしてから、CSSを書き始めます。

それでは、また!