英文:
trying to remove the appearance border inside my input ReactJS & Tailwind
问题
我正在尝试去除我的输入框内部的边框。但是我无法去除它。有人能指导我如何去除它吗？我正在使用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>
);
}
我正在尝试移除输入框内部的灰色边框。我想使用Tailwind来实现这个目标。
英文:
I am trying to remove the appearance border inside my input. But I am unable to remove it. Someone please guide me how can I remove it? I am using TailwindCSS and React JS.
You can see an inner border in the picture attached
This is the link to codesandbox: (Codesandbox)
My code:
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>
);
}
I am trying to remove the inner grey border from the input. I want to achieve it using tailwind
答案1
得分: 0
将以下内容添加到你的index.css文件中：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.swatch-wrapper {
&::-webkit-color-swatch-wrapper {
padding: 0;
}
&::-webkit-color-swatch {
@apply border-2 border-transparent rounded-[4px];
}
}
<!-- end snippet -->
在你的代码中使用这个类：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<input
id="colorPicker"
type="color"
className="swatch-wrapper h-8 w-8 cursor-pointer appearance-none rounded-[4px] border-none bg-none"
value={selectedColor}
onChange={handleColorChange}
/>
<!-- end snippet -->
英文:
Add this into your index.css file
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.swatch-wrapper {
&::-webkit-color-swatch-wrapper {
padding: 0;
}
&::-webkit-color-swatch {
@apply border-2 border-transparent rounded-[4px];
}
}
<!-- end snippet -->
After use the class in your code
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<input
id="colorPicker"
type="color"
className="swatch-wrapper h-8 w-8 cursor-pointer appearance-none rounded-[4px] border-none bg-none"
value={selectedColor}
onChange={handleColorChange}
/>
<!-- end snippet -->
答案2
得分: -1
你有关于Tailwind配置的问题。这就是为什么它不起作用。
在这里查看 https://stackoverflow.com/questions/73070078/tailwind-styling-not-working-in-react-project
英文:
You have issue with tailwind config. Thats why it does not work.
See here https://stackoverflow.com/questions/73070078/tailwind-styling-not-working-in-react-project
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论