动态扩展选择选项背景

问题：正如你可以在图片中看到，该背景所选择的选项不会扩大为选项文本的宽度，并用白色背景..它会不显示剩余的文字，我该如何解决这个问题？我使用的是Chrome浏览器，但我也希望在Firefox和IE浏览器中使用它。动态扩展选择选项背景

enter image description here

HTML：

<select multiple="" class="h-scrollable form-control"> 
       <option ng-repeat="elem in list"> 
        {{elem}}</option> 
      </select>

CSS：

.h-scrollable 
{ 
    width: 350px; 
    height: 150px !important; 
    overflow: auto; 
    margin-right:20px; 
    font-size: medium; 
} 
.h-scrollable:focus 
{ 
    height: 150px !important; 
    overflow: auto; 
    margin-right:20px; 
    font-size: medium; 
    background-size: 100%; 
    background: pink; 
} 
.h-scrollable option 
{ 
    /*width: 350px; */ 
} 
.h-scrollable option:checked 
{ 
    /*width: 400px; THIS FIXES THE PROBLEM FOR A TEXT OF WIDTH = 350px; I want a general solution that will work for any length of text*/ 
}

来源

2014-12-02 AlexandruC

你能澄清你在做什么吗？这里是你的代码小提琴：http://jsfiddle.net/n3g0gb97/ – Askanison4 2014-12-02 15:58:14

CSS和动态不一定混合得很好。不完全确定你想要做什么 – ntgCleaner 2014-12-02 16:00:11

在问题中发布你生成的标记，而不是角码。 – Abhitalks 2014-12-02 16:03:11

把选择内部的一个div，删除宽度上的选择/选项，并添加一个宽度和溢出：汽车的股利。 http://jsfiddle.net/g52qmz32/

<div style="width: 240px; overflow: auto;"> 
    <select multiple="" class="h-scrollable form-control"> 
    <option>one option</option> 
    <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option> 
    <option>another option</option> 
    <option>last option is really very long one</option> 
    </select> 
</div>

这可能需要一些修改，以自己的喜好，但我相信这是你追求的。

**编辑：如果内容宽度不超过240像素，我删除了右边距以消除滚动条。还为.h-scrollable类添加了最小宽度。这是你在找什么？

来源

2014-12-02 17:23:47 deebs

真棒的主意！谢谢 – AlexandruC 2014-12-02 20:02:38

使用CSS做text-overflow，让文本自动截断，而不需要滚动条。

这取决于设计师的判断，但我个人认为两次，然后第三次要求用户在select字段内滚动。

见你拨弄此更新为例：http://jsfiddle.net/7dkhgLrv/6/

UPDATE：还，添加overflow: auto;到.h-scrollable类最佳效果。

来源

2014-12-02 17:02:39 Askanison4

动态扩展选择选项背景

回答

相关问题