Question

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

如果我在下拉列表中有299行，它会保留我的自定义CSS。然而，第二个我达到300行，我的所有样式都被移除，似乎被谷歌浏览器设置为默认值。

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

简单的下拉元素：

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

Answer 1

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

由于a，我们故意禁用300多个选项的样式性能问题（crbug.com/500401）。

了解 here

Answer 2

Chrome故意为300多种选项禁用样式，因此我们无法以这种方式达到答案。

简而言之，我想说你应该使用任何自定义下拉列表。

当您要求实现解决方案时，请参阅此修复程序在这种情况下，我希望您使用其他html元素（如div和list）创建自定义下拉列表，并获取所选列表值。在这里，我将展示如何创建自定义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" })-->

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

2 个答案: