Показать сообщение отдельно
  #3 (permalink)  
Старый 09.12.2018, 03:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

кастомизация селекта
the_little,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .drop{
      display: none;
  }
  li.active{
       background-color: #D3D3D3;
  }
 body{
     display: flex;
 }
 .select{
     margin: 0 auto;
 }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $(".select").on("click", ".slct, li", function(event) {
        event.preventDefault();
        var parent = event.delegateTarget;
        $(".drop", parent).slideToggle();
        if ($(this).is("li")) {
            event.stopPropagation();
            $(this).addClass("active").siblings().removeClass("active");
            var title = this.textContent.trim();
            $(".slct", parent).text(title);
            $("input", parent).val(title)
        }
    }).find("li:first").addClass("active");
    $(document).click(function(event) {
        $(event.target).closest(".select").length || $(".select .drop").slideUp()
    })

});
  </script>
</head>

<body>
<div class="select">
                    <a href="#" class="slct">Прямоугольные стеллы</a>
                    <ul class="drop drop_stella">
                        <li><a>Прямоугольные стеллы</a></li>
                        <li><a>Резные стеллы</a></li>
                        <li><a>Двойник</a></li>
                    </ul>
                    <input name="stella" type="hidden" id="stella" value="Прямоугольные стеллы"/>
                </div>
<div class="select">
                    <a href="#" class="slct">Прямоугольные стеллы</a>
                    <ul class="drop drop_stella">
                        <li><a>Прямоугольные стеллы</a></li>
                        <li><a>Резные стеллы</a></li>
                        <li><a>Двойник</a></li>
                    </ul>
                    <input name="stella" type="hidden" id="stella" value="Прямоугольные стеллы"/>
                </div>
</body>
</html>
Ответить с цитированием