Почему мой снимок CSS исчезает, и как я могу его исправить?

Ответ 1

У меня была та же проблема. Я узнал, что они отключили его на 300 опций или более.

Мы намеренно отключили стиль для более 300 опций из-за (crbug.com/500401).

Прочитайте об этом здесь

Ответ 2

Chrome Умышленно отключил стилизацию для более 300 опций, поэтому мы не можем достичь ответа таким образом.

Короче говоря, я хотел бы сказать, что вы должны использовать любой пользовательский снимок.

Поскольку вы запрашиваете решение для достижения, здесь исправление В этом случае я предпочел бы, чтобы вы создали индивидуальное раскрывающееся меню, используя другие элементы html, такие как divs и list, и принимали выбранное значение списка. Здесь я собираюсь показать демонстрацию того, как создать настроенный div. Код был протестирован в ASP.NET MVC5 С# и отлично работает. Отправьте эту демонстрацию здесь, чтобы продвинуть эту идею, поскольку это может помочь кому-то вроде вас искать, что делать в таких случаях.

в 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" })-->