js+css实现世界杯国家队伍选择下拉框美化代码-html代码-BFW代码库

代码语言：html

代码描述：js+css实现世界杯国家队伍选择下拉框美化代码，将select下拉框美化成地球地图国家选择。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
       @import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, controls,demo;

@layer demo {
  :root{
  	interpolate-size: allow-keywords;
		--fifa-accent-color: #304FFE;
		
		--transition-duration: 300ms; 
		--transition-easing: ease-in-out;
		
		--options-trans-rotation-duration: 32s; /* the speed at which the options rotate around the sphere*/
		
	  /* select element */
    --select-width: 200px;
    --select-padding: .25rem .5rem;
    --select-radius: min(5px,10px);
    --select-text-color: white;
    --select-bg-color: rgb(9 9 121 / .75);
    --select-bg-color-hover: rgb(9 9 121 / .95);
    --select-border-color: 2px solid white;

		/* :picker options wrapper */
    --picker-size: min(80vw,600px);
    --picker-bg-color: rgb(1 1 1 / .2);
		--picker-border-radius: 9in;
    --picker-border: 1px solid rgb(255 255 255 / .15);

		/* options */
    --option-size: 12cqi;
    --option-padding: 0;
    --option-bg-color: rgb(1 1 1 / .5);
    --option-bg-color-hover: rgb(1 1 1 / .5);
    --option-bg-color-selected: rgb(1 1 1 / .85);
		--option-border: none;
    --option-border-color: var(--clr-lines);
		--option-font-size: .8rem;
    --option-text-color: white;
    --option-text-color-hover: white;
    --option-text-color-selected: white;
		--option-offset-radius: calc(var(--picker-size) / 2.5 );
		
		/* button > selected element  */
		--selected-element-radius: var(--select-radius);
		--selected-element-padding: 1rem;
    --selected-element-bg-color: red;
    --selected-element-bg-color-hover: red;
		--selected-element-text-color: white;/*var(--option-text-color)*/;
    --selected-element-border-color: white;
  }
	
  body{
		background: radial-gradient(circle, var(--fifa-accent-color) , rgb(2 0 36) );
  }
	@property --spin {
	  syntax: "<angle>";
	  inherits: false;
	  initial-value: 0deg;
	}
	.custom-select-wrapper{
		position: fixed;
		inset: 0;
		margin: auto;
		width:var(--picker-size);
		height:var(--picker-size);
		 anchor-name: --a-custom-select-wrapper; 
	container-type: inline-size; 
		/*outline: 1px dashed red;*/
		/* trophy */
		&::after{
			content: '';
			position: fixed;
			inset: 0;
			z-index: -1;
			pointer-events: none;
			transition: all 300ms ease-in-out;
			background-image:
	url("//repo.bfw.wiki/bfwrepo/icon/6a249f7f19610.png")
				;
			background-size: calc(var(--picker-size) * 1);
			background-position: center;
			background-repeat: no-repeat;
			/*=background-blend-mode: normal,lighten;*/
		}
		&:has(select:open)::after{
			opacity: .5;
			scale: .75;
		}
	}

  /* base select styles for non supporting browsers */
  select#team-select {
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
    width: var(--select-width);
    background-color: var(--select-bg-color);
		backdrop-filter: blur(3px);
		font-size: 1rem;
		color: var(--select-text-color);
    padding: var(--select-padding);
    border: var(--select-border-color);
    border-radius: var(--select-radius);
		outline: none;
    transition: 
      background-color var(--transition-duration) var(--transition-easing),
      outline var(--transition-duration) var(--transition-easing),
      scale var(--transition-duration) var(--transition-easing);
    &:hover,
    &:focus,
    &:active {
      background-color: var(--select-bg-color-hover);
    }
    &:focus-visible{
      outline: 1px dashed dodgerblue;
      outline-offset: 5px;
    }
 	}
  label{
    transition: opacity 150ms ease-in-out;
  }

  /* if the browser supports custom select lists */
  @supports (appearance: base-select) {
    select,
		::picker(select) {
      appearance: base-select;
    }
		
    select#team-select{
			--num-elements: 48; /* actual value set by the JS */
			
			/* arrow */
      &::picker-icon {
				color: white;
				place-self: center;
      }

      /* options list wrapper */
      &::picker(select) {
		    pointer-events: none;
				position: absolute;
				position-anchor: --a-custom-select-wrapper;
				position-area: span-all;
		    width: var(--picker-size);
				aspect-ratio: 1;
				border: var(--picker-border);
				background-color: var(--picker-bg-color);
				border-radius: var(--picker-border-radius);
				container-type: inline-size;
		    perspective:500px;
		    transform-style:preserve-3d;
				outline: none;
				transition:var(--transition-duration) var(--transition-easing);
				transition-property: scale,opacity;
				scale: var(--picker-scale,0);
      }
      /* scale and opacity in when open */
      &:open::picker(select) {
        --picker-scale: 1;
        @starting-style{
          --picker-scale: .2;
        }
      }
			/* pause animmation when hover*/
			&:has(:hover) {
				--tagcloud-animation-play-state: paused;
			}

			/* selectedcontent = selected option display within button */
      selectedcontent {
        display: grid;
				grid-template-columns: 30px 1fr;
				gap: .25rem;
        color: var(--selected-element-text-color);
        transform-origin:center;
				span{
					padding: 0;
					place-self: center;
					&.icon{
						font-size:1.5rem;
					}
				}
      } 
			/* hide select and selected content button when open */
			&:open,
      &:open selectedcontent{
        scale: 0;
				opacity: 0;
      }
      /* options and selectedcontent share many properties */
      option{
		    /* GEO POSITIONING */
				--lat-adjusted: calc(var(--lat) * 0.5);
				--lat-deg: calc(var(--lat-adjusted) * 1deg);
				--lon-deg: calc(var(--lng) * 1deg);
				
		    /* DEPTH */
		    --depth-angle: calc(var(--lon-deg) + var(--spin) );
				--depth-raw: calc(cos(var(--depth-angle)));
				--depth: calc((var(--depth-raw) + 1) / 2);
		
		    /* VISUAL DEPTH */
		    --tag-scale: calc(0.5 + var(--depth) * 0.5);
				--blur: calc((1 - var(--depth)) * 3px);

				--threshold: 0.2;
				--range: 0.8;

				--visible-depth: max(
  0,
  calc((var(--depth-raw) - var(--threshold)) / var(--range))
);
				--tag-opacity: calc(pow(var(--visible-depth), .5));

				pointer-events: auto;
		    z-index: calc(var(--depth) * 1000);
				transform:
				  translate(-50%, -50%)
				  rotateY(var(--spin))
				  rotateY(var(--lon-deg))
				  rotateX(calc(var(--lat-deg) * 1))
				  translateZ(var(--option-offset-radius))
				  scale(var(--tag-scale));

				position:absolute;
		    top:50%;
		    left:50%;
				background: var(--option-bg-color);
				padding: 0 .25em;
				border-radius: 2px;
				opacity: var(--tag-opacity,1);
				filter: grayscale(0);
				transition: all 150ms ease-in-out;

		    animation: --k-spin var(--options-trans-rotation-duration) linear infinite;
				animation-play-state: var(--t.........完整代码请登录后点击上方下载按钮下载查看