首页 > web前端 > css教程 > 如何在Webkit中自定义颜色选择器输入框?

如何在Webkit中自定义颜色选择器输入框?

Susan Sarandon
发布: 2024-11-20 03:34:02
原创
401 人浏览过

How to Customize the Color Picker Input Box in Webkit?

控制 Webkit 中的颜色选择器框

旧版浏览器的交叉兼容性填充可能会在设置 input[type=color] 元素样式时引入不一致在 Webkit 中。具体来说,当将输入的颜色和背景颜色设置为匹配时,所选颜色周围会出现一个灰色框。

WebKit 特定 CSS 选择器

自定义表单像颜色选择器这样的控件,Webkit 提供了特定的 CSS 选择器。但是,需要注意的是,这些选择器不是官方的,并且可能会在未来的 Webkit 更新中发生重大更改。

因此,建议避免在生产中使用它们,除非用于个人项目。

方法一:隐藏非彩色部分

使用Webkit特有的选择器,可以在很大程度上隐藏颜色选择器输入的非彩色部分。

input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 32px;
    height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
}
登录后复制
<input type=color value="#ff0000">
登录后复制

以上是如何在Webkit中自定义颜色选择器输入框?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板