[Select2 - Customize Select2 Styles] #select2 #custom #customize #styles #styling

css--custom-select2-styles.js

jQuery(document).ready(function($){

if ( $('.map-slider-component').length ) {

		$('.map-slider-component .select-city').select2({
			width: '100%',
			minimumResultsForSearch: Infinity 		// hide the search box
		});

  		// Custom class provision upon select2 events
  		// More events @here https://select2.org/programmatic-control/events
  		// Methods @here: https://select2.org/programmatic-control/methods
		$('.map-slider-component .select-city').on('select2:select', function (e) {
		    
          var data = e.params.data;
		    console.log(data.id);

		    if ( '' !== data.id ) {
			    $('.select2-selection').addClass('selected--non-blank');			
			} else {
				$('.select2-selection.selected--non-blank').removeClass('selected--non-blank');	
			}
          
		})

	}

})

css--custom-select2-styles.scss

.wrap--map-slider-component {

	.map-slider-component {

		/* Select input
		---------------*/

		.select2 {
			margin-bottom: 40px;
			text-align: center;

			.select2-selection {
				height: 42px;
				background: transparent;
				border: none;

				font-family: normal 700 13px/1.3846em var(--font--guillon);
				font-size: 13px;
				font-weight: 700;
				line-height: 18px;
				letter-spacing: -0.1px;

				position: relative;

				&:before {
					content: '';
					position: absolute;
					display: block;
					width: 100%;
					height: 42px;
					top: 0;
					left: 0;

					overflow: hidden;
					z-index: 0;

					border-radius: 50px;
					box-shadow: 0 0 0 2px var(--color--blue);
					transition-property: background, box-shadow; 
					transition-duration: .2s; 
					transition-timing-function: ease-in-out;
				}
				&.selected--non-blank:before {
					background: var(--color--blue);
				}
			}

			.select2-selection__rendered,
			.select2-selection__arrow {
				display: inline-flex!important;
				position: relative;
				z-index: 1;
			}

			.select2-selection__rendered {
				padding-left: 0;
				padding-right: 0;
				width: auto!important;

				line-height: 42px;
			}

			.select2-selection__arrow {
				position: relative!important;
				top: auto!important;
				bottom: auto!important;
				right: auto!important;
				left: auto!important;
				margin-left: 8px!important;
		    	width: 10px!important;
		    	height: 6px!important;

		    	margin-top: 0!important;

				background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.28613L6 6.71389L1 1.28613' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
				background-position: center center;
				background-size: cover;						
				background-repeat: no-repeat;

				transition: all .3333s ease-in-out;
				will-change: transform;

		    	b {
		    		display: none;
		    	}
		    }
			&.select2-container--open .select2-selection__arrow {
				transform: scaleY(-1) translateY(1px);
			}


		}		

	}

}

/**
 * The dropdown with the options is generated at the DOM root, or, more correctly, as a 
 * direct child of the body. 
 *
 * To style these elements and NOT to conflict with other components' select2 instance
 * - either add a component-specific body class (the current solution)
 * - or move the `body > .select2-container` element to another location, see 
 *   @here https://select2.org/dropdown#dropdown-placement
 */
body.has-interactive-map { 

	& > .select2-container {
		margin-top: 34px;
	}

	.select2-results__options {
		text-align: center;
	}

	.select2-search {
		display: none!important;
	}

	.select2-dropdown {
		border: none;
	}

	.select2-results__option:first-child {
		color: #bbb;
	}

}