svg+css美化select下拉选择框代码-html代码-BFW代码库

svg+css美化select下拉选择框代码

代码语言：html

代码描述：svg+css美化select下拉选择框代码

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

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

@layer demo{
	:root{
		--selected-color: orange;
		--focus-outline-color: rgb(124, 207, 0);
		
		--select-trans-duration: 300ms;
    --select-trans-duration-open: 300ms;
    --select-trans-easing: ease-in-out;

		--select-radius: 3px;
		--select-border-color: var(--clr-lines);
		--select-bg-color: Canvas;		

		--option-size: fit-content;
		--option-border-radius: 15px;
		--option-color: white;
		--option-bg-color: dodgerblue;
		--option-bg-color-selected: var(--selected-color);
		--option-bg-color-hover: rgb(124, 207, 0);
		--option-reveal-trans-duration: 500ms;
	}
	body{

		
		/*background-image: linear-gradient(transparent, #111);*/
		/*&::before{
			content: '';
			position: fixed;
			inset: 0;
		background-image: url("https://images.unsplash.com/photo-1528594498426-ea65fdafcbf4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4N.........完整代码请登录后点击上方下载按钮下载查看