Html 为什么我的下拉CSS消失了，我如何修复它？
这是一个非常奇怪的问题，只影响谷歌浏览器 如果我在下拉列表中有299行，它将保留我的自定义CSS。然而，当我到达300行时，我的所有样式都被删除，并且似乎被Google Chrome设置为默认值 在JSFIDLE页面中，它有300行，如果查看结果，它将具有默认样式。但如果删除一行，将应用我的自定义样式。为什么会这样 JSFiddle： 简单下拉元素：Html 为什么我的下拉CSS消失了，我如何修复它？,html,css,asp.net-mvc,Html,Css,Asp.net Mvc,这是一个非常奇怪的问题，只影响谷歌浏览器 如果我在下拉列表中有299行，它将保留我的自定义CSS。然而，当我到达300行时，我的所有样式都被删除，并且似乎被Google Chrome设置为默认值 在JSFIDLE页面中，它有300行，如果查看结果，它将具有默认样式。但如果删除一行，将应用我的自定义样式。为什么会这样 JSFiddle： 简单下拉元素： @Html.DropDownListFor(m => m.SupplierID, new SelectList(Model.Supplier
@Html.DropDownListFor(m => m.SupplierID, new SelectList(Model.Suppliers, "SupplierID", "DisplayName"), "Select Supplier Name", new { @id = "SuppNameDD", @class = "GRDropDown", disabled = true })
我也有同样的问题。我发现他们禁用了300个或更多选项 我们故意禁用300多个选项的样式，因为 性能问题（crbug.com/500401）
阅读相关内容Chrome故意禁用了300多个选项的样式，因此我们无法通过这种方式找到答案 简而言之，我想说的是，您应该使用任何自定义下拉列表。 当您要求一个解决方案来实现时，这里有一个解决方案 在这种情况下，我希望您使用其他html元素（如divs和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" })-->
功能my_dd（el）{
这1.dd=el；
this.initEvents（）；
}
my_dd.prototype={
initEvents:function（）{
var obj=这个；
obj.dd.on（'点击'，功能（事件）{
$（this.toggleClass（'active'）；
event.stopPropagation（）；
});
}
}
$（函数（）{
var dd=新的我的dd（$（'dd'）；
$（文档）。单击（函数（）{
$（'.wrapping'）.removeClass（'active'）；
});
});
/**在选择时，将值带到隐藏文本字段**/
$（文档）.ready（函数（）
{
$（'ul.my_dd li'）。单击（函数（e）
{
所选变量=$（this）.text（）；
/**将标签更改为“选定”**/
$（'.label'）.text（选中）；
$（“#选定值”）.val（选定）；
});
});
*，*：之后，*：之前{
框大小：边框框；
}
.包装{
位置：相对位置；
宽度：200px；
保证金：0自动；
填充：10px 15px；
光标：指针；
大纲：无；
}
.包装：之后{
宽度：0；
身高：0；
位置：绝对位置；
右：16px；
最高：50%；
利润上限：-3px；
边框宽度：1px纯红；
边框样式：实心；
边框颜色：#366；
}
.包装，我的弟弟{
位置：绝对位置；
最高：60%；
左：-45px；
右：0px；
背景：白色；
过渡：所有的0.1都放松；
列表样式：无；
不透明度：0；
指针事件：无；
}
.包装.我的弟弟李a{
显示：块；
文字装饰：无；
边框：1px实心；
填充：10px；
过渡：所有的0.1都放松；
}
.包装，我的弟弟李一{
右边距：5px；
颜色：继承；
垂直对齐：中间对齐；
}
.包装.我的李：盘旋一下{
颜色：灰色；
背景色：暗灰色；
最大高度：300px；
}
.包装。活动：之后{
边框宽度：0 6px 6px 6px；
}
.wrapping.active.my\u dd{
不透明度：1；
指针事件：自动；
高度：300px；
溢出y：滚动；
}
测试下拉列表
...............