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.09.13

HTML・CSS

nth-childの関数表記でカラムごとにCSSを設定

デモページはこちら 3カラムで複数行のコンテンツに、カラムごとに背景色のCSSを設定します。3カラムの場合、1カラム目は:nth-child(3n + 1)、2…

2021.01.30

HTML・CSS

CSS疑似要素のcontentプロパティにcounter関数で連番を指定

デモページはこちら CSS疑似要素のcontentプロパティに、CSSのcounter関数で連番を指定します。JavaScriptは使用せず、CSSのみで実装し…

2021.08.26

HTML・CSS

svgをCSSのbackground-imageに指定

svgをCSSのbackground-imageに指定します。IE11への対応で書き方が変わりますが、今回はIE11にも対応させます。svgのコードは以下の通り…

2020.08.30

HTML・CSS

Font Awesomeの使い方

Font Awesomeの公式サイトで使用したいアイコンフォントを選びます。Iconsのページでアイコンフォントの一覧が確認できます。有料版と無料版があり有料版…

2020.09.18

HTML・CSS

YouTubeの動画からサムネイル画像を取得

YouTubeの動画からサムネイル画像を取得します。取得には半角英数11桁の動画IDが必要です。サムネイル画像は下記の通りサイズ別に分かれていますが、最大サイズ…

上に戻る