点击自定义按钮唤起color类型input并隐藏默认色块，需HTML/CSS还是JS？

不用JavaScript，纯HTML+CSS就能搞定这个需求，下面是具体实现方法：

调整HTML结构 #

原代码把<input>嵌套在<button>里不符合规范（按钮不能包含交互式元素），我们改用<label>标签关联颜色输入框，点击标签即可触发输入框的选择器：

<div class="color-picker">
    <label for="colorPicker" id="color-palette">
        <i class='bx bx-palette'></i>
    </label>
    <input type="color" value="#1dbbce" id="colorPicker">
</div>

用CSS隐藏默认色块 #

通过样式把原生颜色输入框彻底隐藏，但保留交互功能：

#colorPicker {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none; /* 防止干扰按钮点击事件 */
}

/* 给label添加按钮样式，匹配原按钮外观 */
#color-palette {
    display: inline-block;
    padding: 8px 12px;
    cursor: pointer;
    background-color: #f0f0f0;
    border-radius: 4px;
    border: none;
}

#color-palette:hover {
    background-color: #e5e5e5;
}

方案原理 #

• <label>的for属性与input的id绑定后，点击<label>区域会自动触发对应input的交互，直接唤起颜色选择器。
• 将原生输入框设为透明、宽高为0，既隐藏了默认的绿色色块，又完全保留输入框的功能，选色后value值可正常获取。

内容的提问来源于stack exchange，提问作者user22068966