css实现自定义汽车颜色下拉选择框select代码

代码语言:html

所属分类:表单美化

代码描述:css实现自定义汽车颜色下拉选择框select代码

代码标签: css 自定义 汽车 颜色 下拉 选择框 select 代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
:root {
  --bg-color: #edeff3;
  --color: #636363;
  line-height: 1.5;
  font-family: system-ui;
  background-color: var(--bg-color);
  color: var(--color);
}

select,
::picker(select) {
  appearance: base-select;
  border-radius: 0 0 0.5rem 0.5rem;
}

::picker-icon {
  appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='10' height='10'%3E%3Cpath fill='%231e1e1e' d='M5 6.5.8 2.3 0 3.2l5 5 5-5-.8-.8z'/%3E%3C/svg%3E");
  content: "";
  aspect-ratio: 1;
  width: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
}

*,
:afte.........完整代码请登录后点击上方下载按钮下载查看

网友评论0