選選項消失在多重下拉列表中選擇標籤帶滾動條的HTML

我有以下多重下拉菜單中選擇標籤選選項消失在多重下拉列表中選擇標籤帶滾動條的HTML

.Something { 
 
    overflow-x: scroll; 
 
    width: 16%; 
 
}

<select multiple size="5" class="Something"> 
 
    <option>Optionfghfghfgdgdffyuujkyujg 1</option> 
 
    <option>Optionfghfghfgdgdffyuujkyujg 1</option> 
 
    <option>Option n fgnfn ghdnghd ngdh 2</option> 
 
    <option>Optionfghfghfgdgdffyuujkyujg 1</option> 
 
    <option>Option n fgnfn ghdnghd ngdh 2</option> 
 
    <option>Option n fgnfn ghdnghd ngdh 2</option> 
 
</select>

所以每當我選擇一個選項的文本對它的權利消失。

像這樣

我有我的門戶網站這樣幾個下拉菜單。我不希望選項文本消失。這可以使用HTML或CSS完成，而不是編寫自定義的JavaScript代碼？如果是這樣如何？

來源

2017-06-29 Sreekhar

無需支持<select>元素水平滾動屏幕截圖和Fiddles，當你可以在這裏發佈你的代碼的運行版本。 –

@ScottMarcus：謝謝斯科特。我不知道。 – Sreekhar

是的，你可能有圖像 - 它有助於顯示問題。此外JSFiddle可能允許比這裏的片段更多的東西，也可以將代碼發佈在片段中。 @ScottMarcus - 來吧 – mplungjan

水平滾動<select>元素在Edge/Chrome中很麻煩，在Firefox中完全不支持。

一個變通支持所有瀏覽器將只需將它放在一個<div>和應用一些你的CSS的存在，而不是：

.Something { 
 
    overflow-x: auto; 
 
    overflow-y: auto; 
 
    width: 20%; 
 
    height: 100px; 
 
} 
 

 
.Something > select { 
 
    overflow-y: hidden; 
 
}

<div class="Something"> 
 
    <select multiple size="6"> 
 
     <option>Optionfghfghfgdgdffyuujkyujg 1</option> 
 
     <option>Optionfghfghfgdgdffyuujkyujg 1</option> 
 
     <option>Option n fgnfn ghdnghd ngdh 2</option> 
 
     <option>Optionfghfghfgdgdffyuujkyujg 1</option> 
 
     <option>Option n fgnfn ghdnghd ngdh 2</option> 
 
     <option>Option n fgnfn ghdnghd ngdh 2</option> 
 
    </select> 
 
</div>

一些變化必須作出爲此工作。 <select>的size屬性必須與選項的數量相匹配，並且您的<div>必須具有設定的高度。

來源

2017-06-29 21:17:06 Santi

感謝您的解決方案。這工作。 – Sreekhar

謝謝@Santi我不知道。 – Sreekhar

不知道它爲什麼這樣做，我可以在Chrome中重現。

這似乎解決了它。在<option>元素樣式上設置float: left; min-width: 100%;。

float: left破壞<select>中<option>標記的默認塊格式上下文行爲。 min-width: 100%只是使它更美觀一些，它確保即使是具有比<select>的寬度短的內容的<option>標籤在選擇時也是「完全高亮」。

P.S.這修復了Chrome和IE11的問題，不會解決它的IE10-和Firefox，因爲他們根本就不:)

.Something { 
 
    overflow-x: scroll; 
 
    width: 16%; 
 
} 
 

 
option { 
 
    float: left; 
 
    min-width: 100%; 
 
}

<select multiple size="5" class="Something"> 
 
    <option>Optionfghfghfgdgdffyuujkyujg 1</option> 
 
    <option>Optionfghfghfgdgdffyuujkyujg 1</option> 
 
    <option>Option n fgnfn ghdnghd ngdh 2</option> 
 
    <option>Optionfghfghfgdgdffyuujkyujg 1</option> 
 
    <option>Option n fgnfn ghdnghd ngdh 2</option> 
 
    <option>Option n fgnfn ghdnghd ngdh 2</option> 
 
</select>

來源

2017-06-29 21:17:51

好簡單的解決方案！選定的選項元素採用選擇元素的寬度，因此將該寬度以外的任何東西切斷。除非有辦法知道這個詞的'寬度'，因爲如果你將選項的寬度設置爲至少它的全長，你可以看到這一切......這可能是最好的方法。 –

是的，我遇到了Chrome的問題。我認爲這也適用於所有其他選擇標籤。謝謝@Mathijs – Sreekhar

選選項消失在多重下拉列表中選擇標籤帶滾動條的HTML

回答

相關問題