我正在尝试删除输入中的外观边框。但我无法移除它。请有人指导我如何删除它？使用TailwindCSS和React JS。
你可以看到一个内边框在所附的图片
这是codesandbox的链接：（Codesandbox）
我的代码：

import * as React from "react";
import { useState, ChangeEvent } from "react";

export default function App() {
  const [selectedColor, setSelectedColor] = useState("#1C4B40");

  const handleColorChange = (event: ChangeEvent<HTMLInputElement>) => {
    let inputValue = event.target.value;
    if (!inputValue.startsWith("#")) {
      inputValue = `#${inputValue}`;
    }
    setSelectedColor(inputValue);
  };

  return (
    <div className="bg-gray-500">
      <input
        id="colorPicker"
        type="color"
        style={{
          WebkitAppearance: "none",
          appearance: "none",
          backgroundColor: selectedColor,
          borderColor: selectedColor,
          outline: "none"
        }}
        className="h-8 w-8 cursor-pointer rounded-[4px] border-none"
        value={selectedColor}
        onChange={handleColorChange}
      />
    </div>
  );
}

字符串
Image的
我正在尝试从输入中删除内部灰色边框。我想利用顺风来实现
enter image description here的