修改 input 默认控件的颜色

最新推荐文章于 2024-05-24 16:11:15 发布
最新推荐文章于 2024-05-24 16:11:15 发布
阅读量2.2k 收藏 5
点赞数
分类专栏： 前端 文章标签： ui 前端 css Powered by 金山文档
原文链接：https://juejin.cn/post/7173805240657903652
版权

一.Accent-color

开发中不可避免要遇到使用原生input的控件，尤其还要按照UI 设计稿来给控件改变颜色。Accent-color是 CSS 2022 年推出的一个新属性，相比于其它新属性，它有不错的兼容性，它能修改 input 默认控件的颜色。

  1. 单选按钮

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .accented {
            accent-color: #6b41ff;
        }

        [color-scheme="dark"] .accented {
            accent-color: #6b41ff;
        }

        input {
            --size: 2rem;
            block-size: var(--size);
            inline-size: var(--size);
        }

        label {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 1rem;
        }

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

        [color-scheme="dark"] {
            color-scheme: dark;
        }

        fieldset {
            border: 1px solid hsl(0 0% 50%);
            border-radius: 1rem;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        fieldset[color-scheme="dark"] {
            background: Canvas;
            color: white;
        }

        * {
            box-sizing: border-box;
            margin: 0;
        }

        html {
            block-size: 100%;
        }

        body {
            min-block-size: 100%;
            font-family: system-ui, sans-serif;

            display: grid;
            place-content: center;
            gap: 2rem;
        }

        @media (min-width: 540px) {
            body {
                grid-auto-flow: column;
            }
        }
    </style>
</head>

<body>
    <fieldset color-scheme="light">
        <label>
            Default
            <input type="radio" name="default-demo-light" checked>
            <input type="radio" name="default-demo-light">
            <input type="radio" name="default-demo-light">
        </label>

        <label class="accented">
            Tinted
            <input type="radio" name="accented-demo-light" checked>
            <input type="radio" name="accented-demo-light">
            <input type="radio" name="accented-demo-light">
        </label>
    </fieldset>

    <fieldset color-scheme="dark">
        <label>
            Default
            <input type="radio" name="default-demo-dark" checked>
            <input type="radio" name="default-demo-dark">
            <input type="radio" name="default-demo-dark">
        </label>

        <label class="accented">
            Tinted
            <input type="radio" name="accented-demo-dark" checked>
            <input type="radio" name="accented-demo-dark">
            <input type="radio" name="accented-demo-dark">
        </label>
    </fieldset>
</body>

</html>

看一下改变后的效果：

  1. 复选框

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .accented {
            accent-color: #6b41ff;
        }

        [color-scheme="dark"] .accented {
            accent-color: #6b41ff;
        }

        input {
            --size: 2rem;
            block-size: var(--size);
            inline-size: var(--size);
        }

        label {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 1rem;
        }

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

        [color-scheme="dark"] {
            color-scheme: dark;
        }

        fieldset {
            border: 1px solid hsl(0 0% 50%);
            border-radius: 1rem;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        fieldset[color-scheme="dark"] {
            background: Canvas;
            color: white;
        }

        * {
            box-sizing: border-box;
            margin: 0;
        }

        html {
            block-size: 100%;
        }

        body {
            min-block-size: 100%;
            font-family: system-ui, sans-serif;

            display: grid;
            place-content: center;
            gap: 2rem;
        }

        @media (min-width: 480px) {
            body {
                grid-auto-flow: column;
            }
        }
    </style>
</head>

<body>
    <fieldset color-scheme="light">
        <label for="default-light">
            Default
            <input type="checkbox" id="default-light" checked>
        </label>

        <label for="accented-light">
            Tinted
            <input class="accented" type="checkbox" id="accented-light" checked>
        </label>
    </fieldset>

    <fieldset color-scheme="dark">
        <label for="default-dark">
            Default
            <input type="checkbox" id="default-dark" checked>
        </label>

        <label for="accented-dark">
            Tinted
            <input class="accented" type="checkbox" id="accented-dark" checked>
        </label>
    </fieldset>
</body>

</html>

看一下改变后的效果：

  1. 进度条

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .accented {
            accent-color: deeppink;
        }

        [color-scheme="dark"] .accented {
            accent-color: hsl(328 100% 80%);
        }

        progress {
            block-size: 1.5rem;
        }

        label {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 1rem;
        }

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

        [color-scheme="dark"] {
            color-scheme: dark;
        }

        fieldset {
            border: 1px solid hsl(0 0% 50%);
            border-radius: 1rem;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        fieldset[color-scheme="dark"] {
            background: Canvas;
            color: white;
        }

        * {
            box-sizing: border-box;
            margin: 0;
        }

        html {
            block-size: 100%;
        }

        body {
            min-block-size: 100%;
            font-family: system-ui, sans-serif;

            display: grid;
            place-content: center;
            gap: 2rem;
        }

        @media (min-width: 680px) {
            body {
                grid-auto-flow: column;
            }
        }
    </style>
</head>

<body>

    <fieldset color-scheme="light">
        <label>
            Default
            <progress max="100" value="50">50%</progress>
        </label>

        <label class="accented">
            Tinted
            <progress max="100" value="50">50%</progress>
        </label>
    </fieldset>

    <fieldset color-scheme="dark">
        <label>
            Default
            <progress max="100" value="50">50%</progress>
        </label>

        <label class="accented">
            Tinted
            <progress max="100" value="50">50%</progress>
        </label>
    </fieldset>
</body>

</html>

看一下改变后的效果：

  1. 其他input类型

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            --brand: hotpink;
            scrollbar-color: hotpink Canvas;
        }

        :root {
            accent-color: var(--brand)
        }

        :focus-visible {
            outline-color: var(--brand)
        }

        ::selection {
            background-color: var(--brand)
        }

        ::marker {
            color: var(--brand)
        }

        ::-webkit-calendar-picker-indicator {
            color: var(--brand)
        }

        ::-webkit-clear-button {
            color: var(--brand);
        }

        ::-webkit-inner-spin-button,
        ::-webkit-outer-spin-button {
            color: var(--brand);
        }

        * {
            box-sizing: border-box;
            margin: 0;
        }

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

        body {
            min-block-size: 100%;
            font-family: system-ui, sans-serif;

            display: grid;
            place-content: center;
            gap: 2ch;
        }
    </style>
</head>

<body>
    <input type="date">
    <input type="number" min=0 max=10 value=0>
    <input type="text" list="animals" placeholder="Animals">
    <input type="search" list="animals" placeholder="Search...">

    <details>
        <summary>Details</summary>
        <p>Peek-a-boo</p>
    </details>

    <ul>
        <li>This</li>
        <li>Is</li>
        <li>A</li>
        <li>List</li>
    </ul>

    <datalist id="animals">
        <option>tiger</option>
        <option>money</option>
        <option>Spider</option>
    </datalist>
</body>

</html>

看一下改变后的效果：

孙俊熙
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3更改radio的颜色和样式
jinxi1112的博客
09-29 3万+
<label for="radio"> 几个关键点： （1）设置input的opacity为0。 （2）在input后面添加一个label，for属性绑定input的id。 （3）在label中加入两个标签，内部标签负责checked样式，外部负责未选中样式边框。然后在css中修改想要的样式就可以了，样式类似这个样纸。
input单选框和复选框改变自带的颜色和背景色
huihui_999的博客
02-27 3732
改变原生单选框及复选框选中颜色
input[type=radio] 在不同浏览器中默认选中颜色不同的问题
最新发布
remmus98的博客
05-24 200
问题：input单选框在chrome浏览中默认色是蓝色，在edge浏览器中是灰色。属性可以在不改变浏览器默认表单组件基本样式的前提下重置组件的颜色。解决办法：添加样式 accent-color 然后颜色就统一了。
input输入框改变颜色 以及input输入内容更改颜色
热门推荐
老段的CSDN的博客
01-17 1万+
1- 改变input输入框颜色。2-改变input输入内容颜色。
怎样改变input被选中时边框颜色
m0_47002684的博客
06-27 5302
1.当input获得焦点时。
radio选中背景颜色更改
A17608492556的博客
06-27 1601
radio选中背景颜色更改。
radio 单选框选中颜色变化
weixin_45461128的博客
05-31 1万+
JS里面的懒加载(lazyload) 懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载 涉及到图片，falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽，且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源.避免网页打开时加载过多资源，让用户等待太久， 来，举个栗子，当你去东哥的绿帽网网购的时候，打开首页的时候，直接在导航栏选了商品种类跳转到了列表页，那首页下方那些未显示的区域的
HTML5-input表单控件调用代码_html5_表单_input_代码_控件_
09-29
其中，`type`定义了输入控件的类型，`name`是控件的标识名，`value`则是默认显示的值。 二、HTML5新增的`input`类型 1. `email`：用于验证输入的电子邮件格式。 2. `url`：检查输入的是否为有效URL。 3. `tel`：...
jquery datepicker日历控件支持多种颜色弹出日历
11-10
总结来说，`jquery datepicker`日历控件不仅提供了基本的日期选择功能，还允许开发者通过自定义主题或直接修改CSS来实现各种颜色方案。结合其丰富的配置选项和扩展性，你可以轻松地打造符合项目需求的个性化日历组件...
EditText默认提示颜色和输入变色
06-22
要改变`EditText`的提示颜色，我们需要修改`android:textColorHint`属性。在XML布局文件中，可以直接设置： ```xml android:id="@+id/edit_text" android:layout_width="match_parent" android:layout_height=...
layDate多款日期时间控件
09-15
这款控件设计简洁、易用，提供了多种样式和模式，满足不同场景下的需求。在本篇文章中，我们将深入探讨layDate的基本使用、主要功能以及如何在实际项目中应用。 一、layDate的基本使用 1. 引入资源：首先，在HTML...
4种input元素滑块UI样式特效代码
03-20
1. **input[type="range"]元素**：这是HTML5中新增的一种表单控件，用于创建滑块输入条，通常用于调整数值或设置级别。默认样式比较单一，但可以通过CSS进行定制。 2. **CSS3**：层叠样式表第三版，提供了许多新的...
设置input radio选中颜色
qq_41581225的博客
11-11 1895
input radio选中颜色修改
CSS修改input checkbox radio的颜色
weixin_54129994的博客
12-08 635
【代码】CSS修改input checkbox radio的颜色。
1 分钟认识新属性 accent-color —— 修改 input 默认控件颜色
小王的技术库
12-24 1880
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
input框改变选中后的颜色
qq_41353397的博客
03-30 7826
以input="type"为例： 1、默认属性，input{样式} 2、鼠标悬浮：input:hover{样式} 3、点击属性：input:focus{样式} 注意： type不同设置也不同，比如radio还要设置input:checked的样式
input点击后边框颜色变化和placeholder字体大小变化效果实现
qq_45530512的博客
06-25 6816
input点击后边框颜色变化和placeholder字体大小变化效果实现
前端input操作，修改光标颜色，去除背景色
qq_40128591的博客
07-24 6981
修改光标颜色方法： input输入框的光标颜色修改有两种： 第一种设置光标颜色的同时修改光标颜色，使用：color:green; 第二种：只修改光标颜色，使用：create-color:green; 更改input输入框背景色： 从事前端工作半年以上的同志都知道，我们的input输入框是有默认背景色和边框的。但有时候我们有需求放自己的背景色或者没有背景色。 更改颜色很：这比较简单，就是平时我们用的background-color:red;就可以了。 去掉背景色：首先我们要明白的是背景色是标签自带
input文本框颜色的问题
神zhi殇的博客
08-15 2742
修改input输入字体的颜色 color:red; 修改input中placeholder的字体颜色： /* WebKit browsers */ input::-webkit-input-placeholder { color: #C0C0C0; font-size: 14px; } /* Mozilla Firefox 4 to 18 */ input:-moz-placeh...
修改input边框的颜色
03-28
要修改input边框的颜色，可以使用CSS来实现。你可以通过以下几种方式来修改input边框的颜色： 1. 使用内联样式：在input标签中添加style属性，并设置border-color属性来修改边框颜色。例如： ```html <input type=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值