div+css实现默认html标签控件主题色样式修改代码-html代码-BFW代码库

div+css实现默认html标签控件主题色样式修改代码

代码语言：html

代码描述：div+css实现默认html标签控件主题色样式修改代码，包括input、select、datalist、label、range、checkbox、radio等。

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

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

<head>
  <meta charset="UTF-8">

  
<style>
:root {
  --dark-color: #222;
  --mid-color: #333;
  --light-color: #ccc;
  --citation-bg-color: #1E0519;
  --citation-p-color: Salmon;
  --citation-a-color: MediumVioletRed;
  --citation-a-hover-color: DeepPink;
}

*, *::before, *::after {
  box-sizing: border-box;
  font-family: monaco, courier;
  color: var(--light-color);
  margin: 0;
}
*:focus, *::before:focus, *::after:focus {
  outline: none;
}

html {
  box-sizing: border-box;
  block-size: 100%;
  color-scheme: dark light;
}

body {
  min-block-size: 100%;
  margin: 0;
  padding: 0;
}

h2, p, li, summary {
  margin: 0;
  padding: 0 0 2rem 0;
}

ul {
  padding-left: 1rem;
}

li {
  padding-bottom: 10px;
}

.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2rem;
  background: var(--mid-color);
}

html {
  --accent-one: seagreen;
  --accent-two: SlateBlue;
  scrollbar-color: seagreen Canvas;
}

:root {
  accent-color: var(--accent-one);
}

[color-scheme=light] {
  color-scheme: light;
}

[color-scheme=dark] {
.........完整代码请登录后点击上方下载按钮下载查看