Bootstrap，摆脱输入字段中图标的边框答案

【问题标题】：Bootstrap, get rid of border of icon in input fieldBootstrap，摆脱输入字段中图标的边框
【发布时间】：2022-11-16 15:25:42
【问题描述】：

我在 React 中使用 Bootstrap，我正在尝试实现一个密码，其中有一个图标可以单击以在输入字段内的文本和密码类型之间切换。我已经实现了所有的逻辑，但是图标/输入字段有一个边框，所以它看起来像输入右侧的一个按钮，如下所示：

我想知道如何摆脱将两者分开的边框，使其看起来像是在输入框内，就像这个例子一样：

这是我用替换的反应挂钩编写的代码

import { Icon } from "react-icons-kit";
import { eyeOff } from "react-icons-kit/feather/eyeOff";
import { eye } from "react-icons-kit/feather/eye";

<label>Password</label>
<div className="mb-3 input-group">
    <input
        type="password"
        name="password"
        className="form-control"
        placeholder="Enter password"
        required
    />
    <span className="input-group-append bg-white">
        <span className="input-group-text bg-transparent">
            <Icon icon={eyeOff} size={15}/>
        </span>
    </span>
</div>

我试图将“border border-right-0”添加到似乎什么都不做的输入组 div 类，并将“border border-left-0”添加到 input-group-append span 类，但这似乎在已存在的边框周围创建另一个边框。

【问题讨论】：

标签： javascript reactjs bootstrap-5

【解决方案1】：

<button styles={{'border': 'none !important'}} className="...bootstrap" />

不幸的是，我不使用 bootstrap，但以这种方式添加内联样式会比 bootstrap className 更具体，直到您能够找到真正的答案。 '!important' 可能不是实现此目标所必需的。

【讨论】：

【解决方案2】：

首先，您需要从该图标 div 中删除 border-radius : 0px，其次，您可以使用此属性删除边框 border-right:none 包含密码的 div 和 border-left:none 包含图标的 div

【讨论】：