На этой странице wp.html5dev.ru/shops в мобильной версии можно увидеть суть проблемы.
$(document).ready(function() {
$('#cityshops').select2();
$('.catalog-filter__box').on('click', function() {
if ($(this).hasClass('is-flds-opened')) {
$(this).removeClass('is-flds-opened');
} else {
$(this).addClass('is-flds-opened');
}
});
});
.js-shop-letter {
padding-left: 20px;
}
#h3shops {
position: relative;
font-size: 16px;
margin-bottom: 15px;
width: 100%;
color: #2b2b2b;
text-transform: none;
}
.city.shops.select2-hidden-accessible>option {
color: #2b2b2b;
font-family: 'PT Serif';
font-style: italic;
width: 256px;
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
outline: 0 none;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}
span.select2-selection.select2-selection--single {
width: 280px;
}
.catalog-filter__fields.js-scroll.scroll-content.sex label,
.catalog-filter__fields.js-scroll.scroll-content.price label {
color: #2b2b2b;
font-family: 'PT Serif';
font-style: italic;
width: 256px;
margin: 0;
padding: 0;
padding-left: 30px;
font-size: 100%;
font-weight: 400;
vertical-align: baseline;
background: transparent;
outline: 0 none;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}
.select2-selection__rendered,
span .select2-results {
font-size: 100%;
font-weight: 400;
font-family: "PT Serif";
font-style: italic;
}
.select2-results__option {
margin-bottom: 0;
}
li.select2-results__option.select2-results__option--highlighted:hover {
background: #fff;
color: #ff7c7d;
}
li.select2-results__option.select2-results__option--highlighted {
background: #fff;
color: #2b2b2b;
}
select.city.shops::selection {
color: #2b2b2b;
background: #fff;
}
select.city.shops:focus {
border-color: #000;
background: #fff;
}
.list-brands .nav_brands li.color-letter.active {
color: #ff7c7d;
}
#simply-form>fieldset.catalog-filter__box.filter_flds_city>div>div.scroll-wrapper.catalog-filter__fields.js-scroll.scroll-content>div.catalog-filter__fields.js-scroll.scroll-content>select {
color: #2b2b2b;
font-family: 'PT Serif';
font-style: italic;
width: 256px;
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
outline: 0 none;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: #fff;
color: #2b2b2b;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background: #fff;
}
.catalog-filter__btns button.reset {
margin-bottom: 15px;
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
.d-col_lg_9 {
width: 68%;
margin-left: 65px;
}
}
@media screen (min-width: 1201px) {
.d-col_lg_9 {
width: 72%;
margin-left: 25px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<fieldset class="catalog-filter__box filter_flds_city">
<h2 class="h1 catalog-filter__toggle">Город<i class="fa fa-angle-right d-hidden d-show_md"></i></h2>
<div class="scroll-wrapper catalog-filter__fields js-scroll" style="position: relative;">
<div class="catalog-filter__fields js-scroll" style="height: auto; margin-bottom: 0px; margin-right: 0px; max-height: 117px;">
<select name="city" id="cityshops" class="city shops">
<option value="" selected></option>
<option value="0"></option>
<option value="1">Первый</option>
<option value="2">Второй</option>
<option value="3">Третий</option>
<option value="4">Четвертый</option>
<option value="5">Пятый</option>
<option value="6">Шестой</option>
<option value="7">Седьмой</option>
</select>
</div>
</div>
</fieldset>