如何在 html 選擇控制元件中新增水平線？

問題描述

如何在下拉式控制元件或 HTML 中的選擇控制元件中新增水平線 (<hr> 標籤)？

最佳解決方案

一般來說，這不是<select> 的一項功能，大多數瀏覽器對該控制元件的樣式控制非常差。在 Firefox 中，您可以執行以下操作 (儘管在其他瀏覽器中不起作用)：

<select name="test">
    <option val="a">A</option>
    <option val="b" class="select-hr">B</option>
    <option val="c">C</option>
    <option val="d">D</option>
</select>

與 CSS：

option.select-hr { border-bottom: 1px dotted #000; }

但是一般來說，唯一的辦法是用破折號來選擇一個選項，並嘗試使其不可選。

<select name="test">
    <option val="a">A</option>
    <option val="b">B</option>
    <option disabled="disabled">----</option>
    <option val="c">C</option>
    <option val="d">D</option>
</select>

參見：http://jsfiddle.net/qM5BA/283/

次佳解決方案

我以前遇到這個問題，唯一的 cross-browser 方式來實現這一點是使用 unicode 框繪製水平字元。瀏覽器不會在這些字元之間呈現空格。當然這也意味著你的頁面必須接受 unicode(utf-8)，幾乎是這幾天給出的。

這是一個演示，這個使用「light horizontal」框標記：

<option value="" disabled="disabled">─────────────────────────</option>

可以使用各種 unicode 框字元選項作為分隔符，它們之間不應有空格：

“─”，”━”，”┄”，”┅”，”┈”，”┉”

更多關於 unicode 框繪圖字元在這裡：http://www.duxburysystems.com/documentation/dbt11.2/miscellaneous/Special_Characters/Unicode_25xx.htm

您還可以使用 HTML 跳脫字元來包含它們 (複製和貼上通常可以透過插入框字元’UTF-8 序列，哪些瀏覽器似乎尊重，但是這不是一個選項)，這對於一行中的四個輕水平框標記：

& 安培;＃X2500;& 安培;＃X2500;& 安培;＃X2500;& 安培;＃X2500;

它呈現為

────

第三種解決方案

select 元素可能只包含 optgroup 或 option 元素，option 元素只能包含文字。標記如<hr> 是禁止的。

我會使用這樣一個元素建立一個分隔符：

<option disabled role=separator>

你可以考慮這樣的標記：

<optgroup label="-------"></optgroup>

然而，不同瀏覽器之間的渲染變化有點太多了，不能接受。

第四種方案

你可以使用”—” 。每個角色之間沒有可見的空格。在 HTML 中：

<option value disabled>—————————————</option>

或在 XHTML 中

<option value="" disabled="disabled">—————————————</option>

第五種方案

<option>----------</option>

要麼

<option>__________</option>

但是你不能寫<option><hr /></option>

您還可以使用背景影像將 css 類新增到空的<option> 中

<option class="divider"> </option>

參考文獻

How do I add a horizontal line in a html select control?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何在 html 選擇控制元件中新增水平線？