我正在动态填充 <select>
那是可滚动的。我能够在 HTML 和 jQuery UI 中创建它。我遇到的问题是,当我有一个长条目并向右滚动时(使用 overflow: scroll
),突出显示的长度与开始滚动之前选择的宽度一样长。如何将突出显示扩展到最长条目的宽度? (或者文字的长度)
HTML
<div id="div1">
<ol id="selectable">
<li>this/is/a/really/really/really/long/path/name.....................................</li>
<li>Enterprise Service Management/ALMD/alm-manifest-name</li>
<li>joshtestrepo</li>
<li>notatestrepo</li>
<li>vanilla ice cream</li>
</ol>
</div>
<div id="div2">
<select id="selection" size="4">
<option>this/is/a/really/really/really/long/path/name.....................................</option>
<option>Enterprise Service Management/ALMD/alm-manifest-name</option>
<option>joshtestrepo</option>
<option>notatestrepo</option>
<option>vanilla ice cream</option>
</select>
</div>
CSS
#selectable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected {
background-color: #F39814;
color: green;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 250px;
height: 100px;
overflow: scroll;
white-space: nowrap;
resize:both;
}
#selection {
width:250px;
overflow:scroll;
resize:both;
}
jQuery
$(function () {
$("#selectable").selectable();
});
$("#selectable").selectable({
selected: function (event, ui) {
$(ui.selected).siblings().removeClass("ui-selected"); //forces a single select
}
});
---更新---
@TheUknown 的回答对 #selectable
非常有效.为了将来引用,修复常规 <select>
, 尝试使用 display:table
的变体.
最佳答案
这是因为默认显示是列表类型
,它不包含溢出的内容。
只需将其更改为inline-block
#selectable .ui-selected {
background-color: #F39814;
color: green;
display: inline-block;
}
关于jquery - CSS 背景颜色不突出具有 "overflowed"的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30586008/