Javascript:删除 HTML 颜色选择器边框

问题描述 投票:0回答:1

我使用 Javascript 生成的 HTML5 颜色选择器元素来让用户设置另一个元素的颜色。当浏览器执行时,它会绘制一个显示当前所选颜色的矩形。我将这个矩形命名为“颜色井”。颜色很好可以设计:

    pickerElem = document.createElement('input');
    pickerElem.setAttribute ('type', 'color' );
    pickerElem.setAttribute ('style',  "position:absolute; "
        + "top:10px;" + "left:10px;"
        + "width:100px;" + "height:100px; ");
    document.body.appendChild(pickerElem);

这会按预期很好地绘制颜色,但带有大约五个像素宽的白色边框。我想删除白色边框。我尝试添加以下属性:“border:none;”、“border-style:hidden;” “填充:0;”,“边距:0;”和“边框颜色:无;”样式,但浏览器会忽略它们。如果我使用“边框颜色:黑色;”浏览器会在内部白色边框周围添加一个细黑色边框,但不会更改内部边框颜色。如何设置选择器的样式以完全删除内部白色边框?

javascript html
1个回答
0
投票

由于颜色选择器渲染主要由浏览器控制并且难以自定义样式,因此您可以选择将其嵌入到包装器 div 中并将其不透明度设置为零,但仍然有办法选择为此类包装器设计样式所选择的颜色。

这里我使用了一个包装器 div,其样式采用 css 规则

.colorpicker
,其背景颜色由嵌入颜色选择器上的
oninput
事件触发时调用的函数控制:

function changeWrapperColor(embeddedColorPicker) {
  embeddedColorPicker.parentElement
    .style.backgroundColor = embeddedColorPicker.value;  
}
.colorpicker {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: black;
  border: dashed 4px gray;
}

.colorpicker input[type="color"] {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
<div class="colorpicker">
  <input type="color" oninput="changeWrapperColor(this)"/>
</div>

© www.soinside.com 2019 - 2024. All rights reserved.