There are selects on the page made using the select.fx plugin. Everything is fine, but when loading the page they have the appearance of standard selects for some time. The correctness of the sequence of connecting files checked - everything seems to be right. What is the reason for this behavior? By the way, on codepen.io the situation is similar .

It is more convenient to look at an example in 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 answer 1

    Visually, it was not possible to repeat, however, explicitly:

     <style> .cs-select { display: none; } </style>
    • Do not quite understand the course of your thoughts .. Are you talking about the substrate? - Igor
    • one
      So that they do not blink, it is enough to hide naked selekta. They here have a common class .cs-select, and after initialization they are blocks and lists with another class. This way they can be hidden before initialization. - 11111000000
    • Thanks for the help :) - Igor