为什么我的下拉 CSS 消失了，我该如何解决？答案

【问题标题】：Why is my drop down CSS disappearing, and how can I fix it?为什么我的下拉 CSS 消失了，我该如何解决？
【发布时间】：2015-11-02 05:37:59
【问题描述】：

这是一个非常奇怪的问题，只影响谷歌浏览器。

如果下拉列表中有 299 行，它会保留我的自定义 CSS。但是，当我达到 300 行时，我的所有样式都被删除了，并且似乎被 Google Chrome 设置为默认值。

在 JSFiddle 页面中，它有 300 行，如果您查看结果，它将具有默认样式。但是如果你删除一行，我的自定义样式将被应用。这是为什么呢？

JSFiddle：https://jsfiddle.net/s7opd7dm/

简单的下拉元素：

@Html.DropDownListFor(m => m.SupplierID, new SelectList(Model.Suppliers, "SupplierID", "DisplayName"), "Select Supplier Name", new { @id = "SuppNameDD", @class = "GRDropDown", disabled = true })

【问题讨论】：

Chrome 版本 44.0.2403.130（64 位）没有任何问题
有趣 - 在最新的 Chrome/Ubuntu 中存在差异 - 选项字体颜色发生变化（不知道为什么），这两个选项都在同一个小提琴中：@987654322 @
谷歌浏览器本身就是一个错误。当谷歌停止做一些愚蠢的发明时，它可能会在一个好的浏览器中转换。目前，最完整、最强大、最受标准限制的编码是 Firefox。
@Shomz 我刚刚下载了下一个版本的 google chrome 测试版，它已修复。他们必须知道它并在入站时对其进行修复
太棒了，发现它做得很好！

标签： html css asp.net-mvc

【解决方案1】：

我遇到了同样的问题。我发现他们在 300 个或更多选项时禁用了它。

我们故意禁用了 300 多个选项的样式，因为性能问题 (crbug.com/500401)。

了解一下here

【讨论】：

以及thanx的链接，但我需要一个答案，我确信会有任何黑客或方式可以让我们为chrome中的选项列表提供颜色..等待:)thanx再次获取信息..
你问“为什么是这样的？”，遗憾的是我还不知道如何解决这个问题。
很抱歉，但我实际上想要解决方案，因为我喜欢使用 css 和 html 并发现了这个。希望你不会误会我，因为我没有太多的余地但是为了知识的成本，我会.. :)
@Leothelion 即将推出的 Chrome 版本修复了这个问题。
@TylerH，哪一个..我提到了最新版本，但它不起作用:(

【解决方案2】：

Chrome 故意禁用了 300 多个选项的样式，因此我们无法以这种方式获得答案。

简而言之，我想说您应该使用任何自定义下拉菜单。

当您要求实现解决方案时，这里是修复在这种情况下，我希望您使用其他 html 元素（如 div 和列表）创建自定义下拉列表并获取选定的列表值。在这里，我将展示如何创建自定义 div 的演示。该代码已在 ASP.NET MVC5 C# 中进行了测试，并且工作正常。在此处发布此演示以宣传此想法，因为这可能会帮助像您这样的人搜索如何处理此类案例。

在您的 some_view.cshtml 中添加以下内容以包含 jquery 和样式

<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>
<!--<script src="@Url.Content("~/Scripts/myjquery.js")"></script> in case want this jquery to be external-->
<script>
function my_dd(el) {
  this.dd = el;
  this.initEvents();
}
my_dd.prototype = {
  initEvents : function() {
    var obj = this;
    obj.dd.on('click', function(event){
      $(this).toggleClass('active');
      event.stopPropagation();
    }); 
  }
}
$(function() {
  var dd = new my_dd( $('#dd') );
    $(document).click(function() {
      $('.wrapping').removeClass('active');
    });
});
/** on select take the value to hidden text field**/
$(document).ready(function() 
{
$('ul.my_dd li').click(function(e) 
    { 
     var selected=$(this).text();

     /**change label to selected**/
     $('.label').text(selected);
     $('#selected-value').val(selected);
    });
});
</script>
<!--<link href="@Url.Content("~/Content/my.css")" rel="stylesheet" type="text/css" />
 in case want the css to be external-->
</script>
<style>
*,*:after,*:before {
    box-sizing: border-box;
}
.wrapping {
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 10px 15px;
    cursor: pointer;
    outline: none;
}
.wrapping:after {
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -3px;
    border-width: 1px solid red;
    border-style: solid;
    border-color: #366;
}
.wrapping .my_dd {
    position: absolute;
    top: 60%;
    left: -45px;
    right: 0px;
    background: white;
    transition: all 0.1s ease-out;
    list-style: none;
    opacity: 0;
    pointer-events: none;
}
.wrapping .my_dd li a {
    display: block;
    text-decoration: none;
    border: 1px solid;
    padding: 10px;
    transition: all 0.1s ease-out;
}


.wrapping .my_dd li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}

.wrapping .my_dd li:hover a {
    color: grey;
    background-color: darkgrey;
    max-height:300px;
}
.wrapping.active:after {
    border-width: 0 6px 6px 6px;
}

.wrapping.active .my_dd {
    opacity: 1;
    pointer-events: auto;
    height:300px;
    overflow-y:scroll;
}
</style>

</style>
    <div id="dd" class="wrapping">Test Drop Down
        <ul class="my_dd">
    <!-- use list or a foreach or for loop to push content to list
      example
       @foreach(var productId in Model.FailedProductIdsList)
       {
      <li><a href="#">@Convert.ToString(productId);</a></li>
       }-->
      <li><a href="#"><i></i>Select 0</a></li>
            ...............
            <li><a href="#"><i></i>Select 300+</a></li>
        </ul>
    </div>
   <!-- @Html.TextBoxFor(c => c.Propertyname, new { @Value = "selected" })-->

【讨论】：