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] {
  color-scheme: dark;
}

.accented {
  accent-color: var(--accent-two);
}

[color-scheme=dark] {
  accent-color: #6bce96;
}

[color-scheme=dark] .accented {
  accent-color: #c2bceb;
}

:focus-visible {
  outline-color: var(--accent-one);
}

::selection {
  background-color: var(--accent-one);
}

::marker,
::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  color: var(--accent-one);
}

input {
  block-size: 2rem;
  inline-size: 2rem;
  padding: 2rem 1rem;
}
input.basic-field {
  margin-bottom: 1rem;
  width: 400px;
}

label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
@media (min-width: 768px) {
  label:nth-of-type(2) {
    margin-left: 2rem;
  }
}

fieldset {
  border: 1px solid var(--dark-color);
  background: var(--light-color);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
}
@media (min-width: 768px) {
  fieldset {
    flex-direction: row;
  }
}
fieldset[color-scheme=light] label {
  color: var(--dark-color);
}
fieldset[color-scheme=dark] {
  border: 1px solid var(--light-color);
  background: var(--dark-color);
}

input[type=range] {
  padding: 0;
  width: 200px;
}

.extras {
  margin: 2rem 0;
}

.citation {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: var(--citation-bg-color);
}
.citation p {
  margin: 0;
  padding: 10px;
  font-size: 12px;
  color: var(--citation-p-color);
}
.citation p a {
  color: var(--citation-a-color);
  cursor: pointer;
}
.citation p a:hover {
  color: var(--citation-a-hover-color);
}
</style>

  
</head>

<body translate="no">
  <main class="wrapper">
  <h2>CSS Accent Color and Color Scheme</h2>

  <!-- fields -->

  <input class="basic-field" type="date">
  <input class="basic-field" type="number" min=0 max=10 value=0>
  <input class="basic-field" type="text" list="animals" placeholder="Animals">
  <input class="basic-field" type="search" list="animals" placeholder="Search...">
  
  <!-- datalist -->

  <datalist id="animals">
    <option>Option One</option>
    <option>Option Two</option>
    <option>Option Three</option&.........完整代码请登录后点击上方下载按钮下载查看