Как-то на одном проекте возникла необходимость стилизовать тег <select> и его пункты. Как известно с помощью простого CSS он не стилизуется так, как бы этого хотелось. В сети нашел решение. Решение реализовано на CSS и jQuery, взял его на этом сайте. Здесь выложу уже рабочий код, который применил для своих нужд, для плагина Contact Form, отличается он немного скриптом, так как я реализовал, чтобы в описание поля попадало первое значение из выпадающего списка. Так как само поле с выпадающим списком формируется через плагин Contact Form7 и его нельзя поправить.
1. В Contact Form7 я создал поле с выпадающим списком.
2. В сниппете прописал следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
// стилизация SELECT jQuery('.wpcf7-select').each(function() { const _this = jQuery(this), selectOption = _this.find('option'), selectOptionLength = selectOption.length, selectedOption = selectOption.filter(':selected'), duration = 450; // длительность анимации _this.hide(); _this.wrap('<div class="select"></div>'); jQuery('<div>', { class: 'new-select', text: _this.children('option:first').text() }).insertAfter(_this); const selectHead = _this.next('.new-select'); jQuery('<div>', { class: 'new-select__list' }).insertAfter(selectHead); const selectList = selectHead.next('.new-select__list'); for (let i = 1; i < selectOptionLength; i++) { jQuery('<div>', { class: 'new-select__item', html: jQuery('<span>', { text: selectOption.eq(i).text() }) }) .attr('data-value', selectOption.eq(i).val()) .appendTo(selectList); } const selectItem = selectList.find('.new-select__item'); selectList.slideUp(0); selectHead.on('click', function() { if ( !jQuery(this).hasClass('on') ) { jQuery(this).addClass('on'); selectList.slideDown(duration); selectItem.on('click', function() { let chooseItem = jQuery(this).data('value'); jQuery('select').val(chooseItem).attr('selected', 'selected'); selectHead.text( jQuery(this).find('span').text() ); selectList.slideUp(duration); selectHead.removeClass('on'); }); } else { jQuery(this).removeClass('on'); selectList.slideUp(duration); } }); }); |
3. И прописал стили для этого селекта,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
.chm_modal_uslugi .form-contact .select { display: block; width: 100%; position: relative; margin: 0 0 10px 0; } .chm_modal_uslugi .form-contact .new-select { position: relative; border: none; background-color: #f4f6fb; padding: 10px 10px; cursor: pointer; user-select: none; border-radius:8px; font-size: 14px; font-family: Roboto; line-height: 1.15; } .chm_modal_uslugi .form-contact .new-select__list { position: absolute; top: 35px; left: 0; border: none; cursor: pointer; width: 100%; z-index: 2; background: #f4f6fb; user-select: none; } .chm_modal_uslugi .form-contact .new-select__list.on { display: block; } .chm_modal_uslugi .form-contact .new-select__item span { display: block; padding: 10px 15px; border-bottom: 1px solid #ccc; font-size: 14px; font-weight: 600; } .chm_modal_uslugi .form-contact .new-select__item span:hover { background: #ecf0f8; } .chm_modal_uslugi .form-contact .new-select:after { content: ''; display: block; width: 25px; height: 25px; position: absolute; right: 9px; top: 5px; background: url('/wp-content/themes/for_oxygen/img/icn-r-chevron-selectel.svg') no-repeat right center / cover; opacity: 0.6; -webkit-transition: all .27s ease-in-out; -o-transition: all .27s ease-in-out; transition: all .27s ease-in-out; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .chm_modal_uslugi .form-contact .new-select.on:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } |
Получилось очень симпатично, а главное просто.
