勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法

  jQuery JavaScript CSS

セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQueryでhide()指定してもiPhoneのみ非表示にならないという問題が発生した。以下に対応方法をメモ。

 

対応方法

HTML&CSSで対応

<style>
.hide{
    display:none;
}
</style>
<select>
    <span class="hide">
        <option>非表示にしたい項目</option>
    </span>
</select>

jQueryで対応

$(`非表示にしたい選択肢のセレクタ`).wrap(`<span style="display:none;"></span>`);

 

参考サイト

https://stackoverflow.com/questions/36066953/css-hide-options-from-select-menu-on-iphone-safari

 - jQuery JavaScript CSS

  関連記事

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...

画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法
画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

Lightboxで画像拡大時にダウンロードリンクを設置する方法
Lightboxで画像拡大時にダウンロードリンクを設置する方法

Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...

IE11でフォーム送信時に二重登録される
IE11でフォーム送信時に二重登録される

Internet Explorer11でform送信時にデータが二重登録されると ...

JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法
JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法

ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止 ...