0

На странице есть селекты, выполненные с помощью плагина select.fx. Все нормально, но при загрузке страницы они некоторое время имеют внешний вид стандартных селектов. Правильность последовательности подключения файлов проверял - вроде бы все верно. В чем причина такого поведения? К слову, на codepen.io ситуация аналогична.

Смотреть на пример удобней в codepen.

$(document).ready(function() {
  var SelectFX = window.SelectFX,
      selectElement;
  window.addEventListener('load', function() {
    selectElement = document.querySelector('.area-filter');
    new SelectFX(selectElement);
  }, false);

  var SelectFX = window.SelectFX,
      selectElement;
  window.addEventListener('load', function() {
    selectElement = document.querySelector('.bedrooms-filter');
    new SelectFX(selectElement);
  }, false);
});
html, body {
  margin: 0;
}
.main-filter {
  display: flex;
  width: 100%;
  height: 162px;
  padding-top: 25px;
  background: #cec6bc;
  border-top: 5px solid #c5beb4;
  border-bottom: 5px solid #c5beb4;
  box-shadow: 0 0 25px 4px rgba(0,0,0,.24);
  box-sizing: border-box;
}
.main-filter * {
  box-sizing: border-box;
}
.main-filter-container {
  width: 50%;
  height: 100%;
  margin: 0 auto;
}
#main-filter {
  display: flex;
  position: relative;
  align-items: center;
  height: 100%;
  width: 100%;
}
#main-filter .column {
  position: relative;
  width: calc(100% - 271px);
  padding: 0 17px;
}
#main-filter .column:first-of-type {
  padding-left: 0;
}
#main-filter .column:last-of-type {
  padding-right: 0;
}

.close-main-filter {
  position: absolute;
  top: -25px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 3px;
  background: #c2bbb2;
  font-size: 12px;
  color: #8c8479;
}
.close-main-filter i {
  margin-left: 3px;
}

#main-filter .select-container {
  position: relative;
  height: 38px;
}
#main-filter .cs-select {
  position: absolute;
  top: 0;
  left: 0;
}
#main-filter .select-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 38px;
  width: 100%;
  padding-left: 10px;
  border-radius: 2px;
  background: #f2eee9;
  font-size: 14px;
  color: #b3ab9f;
}
#main-filter .cs-select {
  width: 100%;
}

#main-filter .cs-skin-elastic > span::after {
  content: '\f0d7';
  right: 8px;
  font-family: 'FontAwesome';
}
#main-filter div.cs-skin-elastic {
  font-size: 14px;
}

#main-filter .cs-select .cs-placeholder {
  color: #3b352d;
}

#main-filter .cs-select span:first-child {
  border-radius: 2px;
  background: transparent;
  border: 1px solid #b3ab9f;
}
#main-filter .cs-select.cs-active span:first-child {
  border-bottom: none;
  border-radius: 0;
}
#main-filter .cs-select span {
  display: flex;
  align-items: center;
  height: 38px;
  font-family: 'Roboto';
  font-weight: normal;
  padding: 0 25px 0 10px;
  color: #b3ab9f;
}
#main-filter .cs-select .cs-options {
  background: transparent;
}
#main-filter .cs-skin-elastic .cs-options {
  padding-bottom: 0;
}
#main-filter .cs-skin-elastic .cs-options > ul::before {
  background: transparent;
}
#main-filter .cs-select .cs-options ul li > span {
  height: 30px;
  position: relative;
  padding-top: 1px;
  background: #f2eee9;
  border: 1px solid #b3ab9f;
  border-top: 1px solid #dad3c9;
  color: #3b352d;
  -webkit-transition: all .25s;
  -moz-transition: all .25s;
  -ms-transition: all .25s;
  -o-transition: all .25s;
  transition: all .25s;
}
#main-filter .cs-select .cs-options ul li:first-child > span {
  border-bottom: none;
}
#main-filter .cs-select .cs-options ul li:last-child > span {
  border-bottom: 1px solid #b3ab9f;
  border-radius: 0 0 2px 2px;
}
#main-filter .cs-select .cs-options ul li > span:hover {
  background: #e8e5e1;
}

/* area-filter */
#main-filter .column.area-filter-col {
  width: 144px;
}
#main-filter .column.area-filter-col:before {
  content: 'Этажность:';
  position: absolute;
  top: -30px;
  left: 17px;
  font-family: 'Roboto';
  font-weight: bold;
  font-size: 15px;
  color: #1e1b18;
}
#main-filter .cs-select.area-filter .cs-placeholder {
  padding: 2px 20px 0 55px;
}
#main-filter .cs-select ul li > span::after {
  opacity: 1;
  margin-left: 0.3em;
}
#main-filter .cs-select.cs-active ul li.cs-selected > span::after {
  font-family: 'Roboto';
  margin-left: 1em;
}
#main-filter .cs-select.area-filter .cs-options ul li:first-child > span:after {
  content: 'этаж';
}
#main-filter .cs-select.area-filter .cs-options ul li:nth-child(2) > span:after {
  content: 'этажа';
}
#main-filter .cs-select.area-filter .cs-options ul li:nth-child(3) > span:after {
  content: 'этажа';
}
#main-filter .cs-select.area-filter .cs-options ul li:nth-child(4) > span:after {
  content: 'этажа';
}
#main-filter .cs-select.area-filter .cs-options ul li:nth-child(5) > span:after {
  content: 'этажей';
}
/* area-filter */

/* bedrooms-filter */
#main-filter .column.bedrooms-filter-col {
  width: 127px;
}
#main-filter .column.bedrooms-filter-col:before {
  content: 'Спальни:';
  position: absolute;
  top: -30px;
  left: 17px;
  font-family: 'Roboto';
  font-weight: bold;
  font-size: 15px;
  color: #1e1b18;
}
#main-filter .cs-select.bedrooms-filter .cs-placeholder {
  padding: 2px 20px 0 55px;
}
#main-filter .cs-select.bedrooms-filter .cs-options ul li:first-child > span:after {
  content: 'спальня';
}
#main-filter .cs-select.bedrooms-filter .cs-options ul li:nth-child(2) > span:after {
  content: 'спальни';
}
#main-filter .cs-select.bedrooms-filter .cs-options ul li:nth-child(3) > span:after {
  content: 'спальни';
}
#main-filter .cs-select.bedrooms-filter .cs-options ul li:nth-child(4) > span:after {
  content: 'спальни';
}
#main-filter .cs-select.bedrooms-filter .cs-options ul li:nth-child(5) > span:after {
  content: 'спален';
}
/* bedrooms-filter */
<link rel="stylesheet" href="http://nforest.ru/css/component.selectfx.css">

<script src="https://use.fontawesome.com/ea0959dcb8.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://nforest.ru/js/example.min.js"></script>


<div class="main-filter">
    <div class="main-filter-container">
        <form id="main-filter" action="" method="">
            <a class="close-main-filter">
                <span>Close</span>
                <i class="zmdi zmdi-close"></i>
            </a>
            <div class="column">
<!--                 <div data-role="rangeslider">
                    <label for="range-1a">Rangeslider:</label>
                    <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40" />
                    <label for="range-1b">Rangeslider:</label>
                    <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80" />
                </div> -->
            </div>
            <div class="column bedrooms-filter-col">
                <div class="select-container">
                    <div class="select-placeholder">кол-во</div>
                    <select class="bedrooms-filter cs-select cs-skin-elastic">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="3">4</option>
                        <option value="3">5</option>
                    </select>
                </div>
            </div>
            <div class="column area-filter-col">
                <div class="select-container">
                    <div class="select-placeholder">кол-во</div>
                    <select class="area-filter cs-select cs-skin-elastic">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="3">4</option>
                        <option value="3">5</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
</div>

1 ответ 1

2

Визуально повторить не удалось, однако, явно:

<style>
  .cs-select { display: none; }
</style>
3
  • Не совсем понимаю ход вашей мысли.. Вы про подложку?
    – Игорь
    25 окт 2016 в 7:45
  • 1
    Чтобы они не мигали - достаточно скрывать голые селекты. Они тут имеют общий класс .cs-select, а после инициализации представляют собой блоки и списки с другим классом. Таким образом их можно скрыть до инициализации. 25 окт 2016 в 8:02
  • Благодарю за помощь :)
    – Игорь
    25 окт 2016 в 8:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.