html – 输入类型颜色样式

概述我有一个小问题,因为我不太擅长CSS我想知道是否有任何方法我可以重新创建这样一个很好的输入[type = color]元素的风格？我的意思不是屏幕截图上的所有内容,而只是输入[type = color]的那个漂亮的圆圈. 这里我有一些用它编写的代码,但它没有像截图那样设置输入[type = color] …我也看到作者在他的项目中使用了Vue.js …非常感谢你救命！ <input type="c 我有一个小问题,因为我不太擅长CSS我想知道是否有任何方法我可以重新创建这样一个很好的输入[type = color]元素的风格？我的意思不是屏幕截图上的所有内容,而只是输入[type = color]的那个漂亮的圆圈.

这里我有一些用它编写的代码,但它没有像截图那样设置输入[type = color] …我也看到作者在他的项目中使用了Vue.Js …非常感谢你救命！

<input type="color" ID="primary_color"  name="primary-color" v-model="scheme.primary" @change="changecolor()">

input[type="color"] {    wIDth: 3rem;    height: 3rem;    padding: .5rem;    background-color: transparent;    border: 0;    border-radius: 100%;}input[type="color" i] {    -webkit-appearance: square-button;    wIDth: 44px;    height: 23px;    background-color: buttonface;    cursor: default;    border-wIDth: 1px;    border-style: solID;    border-color: rgb(169,169,169);    border-image: initial;    padding: 1px 2px;}input {    -webkit-appearance: textfIEld;    background-color: white;    -webkit-rtl-ordering: logical;    cursor: text;    padding: 1px;    border-wIDth: 2px;    border-style: inset;    border-color: initial;    border-image: initial;}input,textarea,select,button {    text-rendering: auto;    color: initial;    letter-spacing: normal;    word-spacing: normal;    text-transform: none;    text-indent: 0px;    text-shadow: none;    display: inline-block;    text-align: start;    margin: 0em;    Font: 400 13.3333px Arial;}input,button,meter,progress {    -webkit-writing-mode: horizontal-tb;}

解决方法 这是您需要的代码：

var colorbutton = document.getElementByID("primary_color");    var colordiv = document.getElementByID("color_val");    colorbutton.onchange = function() {        colordiv.INNERHTML = colorbutton.value;        colordiv.style.color = colorbutton.value;    }

#primary_color{    border-radius: 100%;    height: 60px;    wIDth: 60px;    border: none;    outline: none;    -webkit-appearance: none;}#primary_color::-webkit-color-swatch-wrapper {    padding: 0;	}#primary_color::-webkit-color-swatch {    border: none;    border-radius: 100%;}

<div >    <input type="color" ID="primary_color" >    <span  ID="color_val"></span></div>

很容易理解,祝好运！ 总结

以上是内存溢出为你收集整理的html – 输入类型颜色样式全部内容，希望文章能够帮你解决html – 输入类型颜色样式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。