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>

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

関連記事

2020.08.30

HTML・CSS

Font Awesomeの使い方

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

2020.09.14

HTML・CSS

metaタグのformat-detectionで自動リンクを無効化

デモページはこちら metaタグのformat-detectionを設定して、スマホのブラウザで電話番号、メールアドレス、住所の表記がリンクに自動変換されるのを…

2022.08.28

HTML・CSS

親要素にtransformが設定されている場合のposition: fixed;

通常、position: fixed;でtop: 0;left: 0;の場合、画面の左上が基準位置になります。しかし、親要素(先祖を含む)にtransformが…

2024.09.02

HTML・CSS

box-shadowとfilter: drop-shadowの違い

box-shadowプロパティとfilterプロパティのdrop-shadowを比較して違いを確認します。デモページはこちら filter: drop-shad…

2020.10.30

HTML・CSS

Twitterボタンの設置とカスタマイズ

デモページはこちら Twitterボタンの設置とカスタマイズのまとめです。ボタンのソースコードは以下の公式サイトから生成できます。ただし、jsの読み込みが必要に…

上に戻る