2020.06.27

HTML・CSS

iOSのブラウザでセレクトボックスの文字を省略せずに表示

iOSのブラウザではセレクトボックスに長いテキストの選択肢がある場合、途中で省略して表示されます。省略記号「…」が付いて選択肢が最後まで読めません。これを全て表示するにはselectタグとoptionタグの間にoptgroup(オプショングループ)タグを入れます。

<select>
<optgroup>
<option value="0" selected="selected">選択してください。</option>
<option value="select01">長いテキストの選択肢長いテキストの選択肢長いテキストの選択肢長いテキストの選択肢</option>
<option value="select02">選択肢2</option>
<option value="select03">選択肢3</option>
<option value="select04">選択肢4</option>
<option value="select05">選択肢5</option>
<option value="select06">選択肢6</option>
</optgroup>
</select>

これで選択肢は省略されず、長いテキストでも文字サイズが小さくなり折り返して表示されます。

関連記事

2021.03.03

HTML・CSS

tableの横スクロール時にタッチデバイスでアニメーション表示

ブラウザの幅がtableの幅よりも狭くなった時に、CSSのoverflow-xを利用して横スクロールでtableを表示します。ただしiOS13以降safariで…

2021.07.04

HTML・CSS

background-positionプロパティを利用した背景画像の右寄せ

background-positionプロパティを利用して背景画像を右寄せします。Y軸方向の位置は中央寄せにします。単純な右寄せであればbackground-p…

2025.08.08

HTML・CSS

fit-contentのセンタリングを利用した横幅可変のグラデーション背景

width: fit-contentを利用してテキストをセンタリングし、グラデーションの背景を表示します。デモページはこちら 以下のhtml構造で確認します。d…

2024.06.18

HTML・CSS

z-index: -1;指定時の注意点

z-indexプロパティの重なりで、z-index: -1;を指定した時の注意点を確認します。デモページはこちら 以下のhtml構造で確認します。クラス名div…

2024.09.22

HTML・CSS

linear-gradientで作る格子模様と市松模様

background-imageプロパティのlinear-gradientで、1pxの線のみの格子模様と塗りと塗り無しの市松模様を作成します。デモページはこちら…

上に戻る