Множественные варианты выбора переполняются вертикально

Question

У меня есть веб-страница CMS, в которой отображается несколько элементов для нескольких элементов html. Существует множество вариантов для полей выбора. Моя проблема заключается в том, что для Chrome (версия 41.0.2272.101 m & Version 42.0.2311.90 m) и Opera (версия: 28.0.1750.51) указаны опции для переполнения элемента multi select.

В Firefox (версия 36.0.4) мульти выберите элемент имеет вертикальную полосу прокрутки и выглядит отлично. Он также прекрасно смотрится на Internet Explorer (версия 11.0.9)

<select multiple="multiple" name="field_countries_and_regions_tid[]" id="edit-field-countries-and-regions-tid" size="9" class="form-select"><option value="533">Caribbean</option><option value="545">-Aruba</option><option value="546">-Bahamas</option><option value="547">-Barbados</option><option value="548">-Bermuda</option><option value="549">-Caribbean Netherlands</option><option value="550">-Cuba</option><option value="551">-Dominica</option><option value="552">-Dominican Republic</option><option value="553">-Grenada</option><option value="554">-Guadeloupe</option><option value="555">-Haiti</option><option value="556">-Jamaica</option><option value="557">-Martinique</option><option value="558">-Montserrat</option><option value="559">-Puerto Rico</option><option value="560">-Saint Kitts And Nevis</option><option value="561">-Saint Lucia</option><option value="562">-Saint Vincent And The Grenadines</option><option value="563">-Trinidad And Tobago</option><option value="564">-Turks And Caicos Islands</option><option value="565">-Virgin Islands, British</option><option value="566">-Virgin Islands, U.S.</option><option value="534">Central America</option><option value="567">-Belize</option><option value="568">-Costa Rica</option><option value="569">-El Salvador</option><option value="570">-Guatemala</option><option value="571">-Honduras</option><option value="572">-Nicaragua</option><option value="573">-Panama</option><option value="535">Central and Eastern Europe</option><option value="574">-Belarus</option><option value="575">-Bosnia And Herzegovina</option><option value="576">-Bulgaria</option><option value="577">-Croatia</option><option value="578">-Cyprus</option><option value="579">-Czech Republic</option><option value="580">-Estonia</option><option value="581">-Greece</option><option value="582">-Hungary</option><option value="583">-Kosovo</option><option value="584">-Latvia</option><option value="585">-Lithuania</option><option value="586">-Macedonia, The Former Yugoslav Republic Of</option><option value="587">-Moldova</option><option value="588">-Monaco</option><option value="589">-Poland</option><option value="590">-Romania</option><option value="591">-Russia</option><option value="592">-Serbia</option><option value="593">-Slovakia</option><option value="594">-Slovenia</option><option value="595">-Ukraine</option><option value="596">-Yugoslavia</option><option value="536">Central Asia and Caucasus</option><option value="597">-Armenia</option><option value="598">-Azerbaijan</option><option value="599">-China</option><option value="600">-Georgia</option><option value="601">-Hong Kong (Special Administrative Region of the People's Republic of China)</option><option value="602">-Kazakhstan</option><option value="603">-Kyrgyzstan</option><option value="604">-Mongolia</option><option value="605">-Tajikistan</option><option value="606">-Turkmenistan</option><option value="607">-Uzbekistan</option><option value="537">East Asia</option><option value="608">-Brunei Darussalam</option><option value="609">-Cambodia</option><option value="610">-East Timor</option><option value="611">-Indonesia</option><option value="612">-Japan</option><option value="613">-Laos</option><option value="614">-Macau</option><option value="615">-Malaysia</option><option value="616">-Myanmar</option><option value="617">-North Korea (DPRK)</option><option value="618">-Philippines</option><option value="619">-Singapore</option><option value="620">-South Korea (ROK)</option><option value="621">-Taiwan, Province Of China</option><option value="622">-Thailand</option><option value="623">-Viet Nam</option><option value="538">Middle East and North Africa</option><option value="624">-Bahrain</option><option value="625">-Iran, Islamic Republic Of</option><option value="626">-Iraq</option><option value="627">-Israel</option><option value="628">-Jordan</option><option value="629">-Lebanon</option><option value="630">-Oman</option><option value="631">-Palestinian Territory, Occupied</option><option value="632">-Qatar</option><option value="633">-Reunion</option><option value="634">-Saudi Arabia</option><option value="635">-Syrian Arab Republic</option><option value="636">-Turkey</option><option value="637">-Yemen</option><option value="539">North America</option><option value="638">-Canada</option><option value="639">-Greenland</option><option value="640">-Mexico</option><option value="641">-Saint Pierre And Miquelon</option><option value="642">-United States of America</option><option value="540">Pacific</option><option value="643">-American Samoa</option><option value="644">-Australia</option><option value="645">-Cook Islands</option><option value="646">-Fiji</option><option value="647">-French Polynesia</option><option value="648">-Guam</option><option value="649">-Kiribati</option><option value="650">-Nauru</option><option value="651">-New Caledonia</option><option value="652">-New Zealand</option><option value="653">-Niue</option><option value="654">-Norfolk Island</option><option value="655">-Northern Mariana Islands</option><option value="656">-Palau</option><option value="657">-Papua New Guinea</option><option value="658">-Pitcairn</option><option value="659">-Samoa</option><option value="660">-Solomon Islands</option><option value="661">-Tokelau</option><option value="662">-Tonga</option><option value="663">-Tuvalu</option><option value="664">-United States Minor Outlying Islands</option><option value="665">-Vanuatu</option><option value="666">-Wallis And Futuna</option><option value="541">South America</option><option value="667">-Argentina</option><option value="668">-Bolivia</option><option value="669">-Brazil</option><option value="670">-Chile</option><option value="671">-Colombia</option><option value="672">-Ecuador</option><option value="673">-Falkland Islands (Malvinas)</option><option value="674">-French Guiana</option><option value="675">-Guyana</option><option value="676">-Paraguay</option><option value="677">-Peru</option><option value="678">-South Georgia And The South Sandwich Islands</option><option value="679">-Suriname</option><option value="680">-Uruguay</option><option value="681">-Venezuela</option><option value="542">South Asia</option><option value="682">-Afghanistan</option><option value="683">-Bangladesh</option><option value="684">-Bhutan</option><option value="685">-British Indian Ocean Territory</option><option value="686">-Christmas Island</option><option value="687">-Cocos (Keeling) Islands</option><option value="688">-Heard Island And Mcdonald Islands</option><option value="689">-India</option><option value="690">-Maldives</option><option value="691">-Marshall Islands</option><option value="692">-Micronesia, Federated States Of</option><option value="693">-Nepal</option><option value="694">-Pakistan</option><option value="695">-Sri Lanka</option><option value="543">Sub-Saharan Africa</option><option value="696">-Algeria</option><option value="697">-Benin</option><option value="698">-Botswana</option><option value="699">-Burkina Faso</option><option value="700">-Burundi</option><option value="701">-Cameroon</option><option value="702">-Cape Verde</option><option value="703">-Central African Republic</option><option value="704">-Chad</option><option value="705">-Comoros</option><option value="706">-Congo</option><option value="707">-Congo, The Democratic Republic Of The</option><option value="708">-Cote D'ivoire</option><option value="709">-Djibouti</option><option value="710">-Egypt</option><option value="711">-Equatorial Guinea</option><option value="712">-Eritrea</option><option value="713">-Ethiopia</option><option value="714">-Gabon</option><option value="715">-Gambia</option><option value="716">-Ghana</option><option value="717">-Guinea</option><option value="718">-Guinea-Bissau</option><option value="719">-Kenya</option><option value="720">-Lesotho</option><option value="721">-Liberia</option><option value="722">-Libyan Arab Jamahiriya</option><option value="723">-Madagascar</option><option value="724">-Malawi</option><option value="725">-Mali</option><option value="726">-Mauritania</option><option value="727">-Mauritius</option><option value="728">-Mayotte</option><option value="729">-Morocco</option><option value="730">-Mozambique</option><option value="731">-Namibia</option><option value="732">-Niger</option><option value="733">-Nigeria</option><option value="734">-Rwanda</option><option value="735">-Sao Tome And Principe</option><option value="736">-Senegal</option><option value="737">-Seychelles</option><option value="738">-Sierra Leone</option><option value="739">-Somalia</option><option value="740">-South Africa</option><option value="741">-Sudan</option><option value="742">-Swaziland</option><option value="743">-Tanzania</option><option value="744">-Togo</option><option value="745">-Tunisia</option><option value="746">-Uganda</option><option value="747">-Western Sahara</option><option value="748">-Zambia</option><option value="749">-Zimbabwe</option><option value="544">Western Europe</option><option value="750">-Austria</option><option value="751">-Belgium</option><option value="752">-Denmark</option><option value="753">-Faroe Islands</option><option value="754">-Finland</option><option value="755">-France</option><option value="756">-Germany</option><option value="757">-Gibraltar</option><option value="758">-Greenland</option><option value="759">-Holy See (Vatican City State)</option><option value="760">-Iceland</option><option value="761">-Ireland</option><option value="762">-Italy</option><option value="763">-Liechtenstein</option><option value="764">-Luxembourg</option><option value="765">-Malta</option><option value="766">-Netherlands</option><option value="767">-Norway</option><option value="768">-Portugal</option><option value="769">-Saint Helena</option><option value="770">-San Marino</option><option value="771">-Spain</option><option value="772">-Svalbard And Jan Mayen</option><option value="773">-Sweden</option><option value="774">-Switzerland</option><option value="775">-United Kingdom</option></select> 

Вот CSS:

element.style { 
} 
resource-multi-category-searchmedia="all" 
select[multiple], select[size] { 
    height: auto; 
} 
resource-multi-category-searchmedia="all" 
select[multiple], select[size] { 
    height: auto; 
} 
resource-multi-category-searchmedia="all" 
select { 
    -webkit-appearance: menulist; 
} 
resource-multi-category-searchmedia="all" 
input.form-text, textarea.form-textarea, select { 
    background-color: #fcfcfc; 
    border: 2px solid #eaeaea; 
    color: #999999; 
    font-size: 14px; 
    padding: 14px; 
    width: 100%; 
    min-height: 50px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
} 

Кто-нибудь есть какие-либо идеи о том, как я могу это исправить?

Спасибо,

Дэвид

***************** ***************** UPDATE ******** У моей компании есть другой веб-сайт, в котором есть несколько элементов выбора, где полоса прокрутки выглядит нормально для Chrome , т. Е. http://www.elaw.org/resources На этой странице многоэлементные элементы имеют полосу прокрутки, и я не вижу серьезных разница между их элементами выбора и тем, что я описал выше, где варианты вместо переполнения.

Answer 1

Ваша проблема заключается в этом стиле:

select { 
    -webkit-appearance: menulist; 
} 

Изменение menulist к normal и выберите поле будет вести себя нормально.