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

现场版本:潮汐力主题


当前回答

.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

将上述标签添加到您的CSS文件中,并使用指定的类。

其他回答

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

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

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

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

你可以试试这个: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>





 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

例如,你可以使用这个:标签隐藏输入(图标显示)。

我遇到过这样的情况。它没有工作,因为背景:#ebebeb;我想把背景放在输入字段,该属性不断地显示在背景图像的顶部,我无法看到图像!我把background属性移到background-image属性上面,它起作用了。

input[type='text'] {
    border: 0;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
    background: #ebebeb;
}

我的解决方案是:

input[type='text'] {
    border: 0;
    background: #ebebeb;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
}

值得一提的是,边框、填充和文本对齐属性对于解决方案并不重要。我只是复制了原始代码。

这对我来说很管用:

输入。有效的{ 边框颜色:# 28 a745; padding-right: 30 px; 背景图片:url (https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png); 平铺方式:不再重演; Background-size: 20px; 背景位置:右中心; } < >形式 <标签= "名称" >名称> < /标签 <input class="valid" type="text" name="name" /> > < /形式