我如何把一个图标内的形式的输入元素?

现场版本:潮汐力主题


当前回答

我用下面的代码实现了这一点。

首先,你弯曲容器,使输入和图标在同一行。对齐物品可以使它们处于同一水平线上。

然后,使输入占用宽度的100%。给出图标的绝对位置,使其与输入重叠。

然后为输入添加右填充,这样输入的文本就不会到达图标。最后使用css属性给图标留出一些距离输入框边缘的空间。

注意:Icon标签可以是一个真正的图标,如果你是在ReactJs中工作,也可以是一个占位符,用于你在项目中使用图标的任何其他方式。

.inputContainer { 显示:flex; 对齐项目:中心; 位置:相对; } .input { 宽度:100%; padding-right: 40像素; } .inputIcon { 位置:绝对的; 右:10 px; } < div class = " inputContainer”> <input class="input" /> <图标类="inputIcon" /> < / div >

其他回答

没有背景图片的解决方案:

.icon { padding-left: 25 px; 背景:url(“https://static.thenounproject.com/png/101791-200.png”)无重复左; background-size: 20 px; } <input type="text" class="icon" value placeholder="Search">

或者从右到左的图标

.icon-rtl { padding-right: 25 px; 背景:url(“https://static.thenounproject.com/png/101791-200.png”)无重复权限; background-size: 20 px; } <input type="text" class="icon-rtl" value placeholder="Search">

你可以试试这个:Bootstrap-4 Beta https://www.codeply.com/go/W25zyByhec

<div class="container">
            <form>
                <div class="row">
                    <div class="input-group mb-3 col-sm-6">
                      <input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        <div class="input-group-prepend bg-white">
                            <span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>





在输入中定位图标的一个简单易行的方法是使用下面代码所示的CSS属性position。 注意:为了清晰起见,我简化了代码。

创建围绕输入和图标的容器。 将容器位置设置为相对位置 将图标设置为绝对位置。这将使图标相对于周围的容器进行定位。 使用顶部,左侧,底部,右侧来定位容器中的图标。 设置输入内的填充,使文本不与图标重叠。

#输入容器{ 位置:相对; } #输入容器> img { 位置:绝对的; 上图:12 px; 左:15 px; } #输入容器>输入{ padding-left: 40像素; } < div id = "输入容器" > < img / > <输入/ > < / div >

其他人发布的CSS解决方案是实现这一目标的最佳方法。

如果这会给你带来任何问题(请阅读IE6),你也可以在div中使用无界输入。

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

不是那么“干净”,但应该在旧的浏览器上工作。

我用下面的代码实现了这一点。

首先,你弯曲容器,使输入和图标在同一行。对齐物品可以使它们处于同一水平线上。

然后,使输入占用宽度的100%。给出图标的绝对位置,使其与输入重叠。

然后为输入添加右填充,这样输入的文本就不会到达图标。最后使用css属性给图标留出一些距离输入框边缘的空间。

注意:Icon标签可以是一个真正的图标,如果你是在ReactJs中工作,也可以是一个占位符,用于你在项目中使用图标的任何其他方式。

.inputContainer { 显示:flex; 对齐项目:中心; 位置:相对; } .input { 宽度:100%; padding-right: 40像素; } .inputIcon { 位置:绝对的; 右:10 px; } < div class = " inputContainer”> <input class="input" /> <图标类="inputIcon" /> < / div >