您链接的站点使用 CSS 技巧的组合来实现这一目标。首先,它为 <input>
元素使用背景图像。然后,为了将光标移到上面,它使用 padding-left
。
换句话说,它们有以下两条 CSS 规则:
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
其他人发布的 CSS 解决方案是实现此目的的最佳方式。
如果这会给您带来任何问题(阅读 IE6),您还可以在 div 内使用无边框输入。
<div style="border: 1px solid #DDD;">
<img src="icon.png"/>
<input style="border: none;"/>
</div>
不像“干净”,但应该适用于较旧的浏览器。
没有背景图像的解决方案:
.icon { padding-left: 25px;背景: url("https://static.thenounproject.com/png/101791-200.png") 没有重复;背景尺寸:20px; }
或从右到左的图标
.icon-rtl { padding-right: 25px;背景: url("https://static.thenounproject.com/png/101791-200.png") 无重复权;背景尺寸:20px; }
你可以试试这个:
input[type='text'] {
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
}
我发现这是最好和最干净的解决方案。在 input
元素上使用 text-indent:
#icon { 背景图像: url(../images/icons/dollar.png);背景重复:不重复;背景位置:2px 3px; }
一种在输入中定位图标的简单方法是使用 position CSS 属性,如下面的代码所示。注意:为了清楚起见,我已经简化了代码。
创建围绕输入和图标的容器。将容器位置设置为相对 将图标设置为绝对位置。这将相对于周围容器定位图标。使用 top、left、bottom、right 将图标定位在容器中。在输入中设置填充,使文本不会与图标重叠。
#input-container { 位置:相对; } #input-container > img { 位置:绝对;顶部:12px;左:15px; } #input-container > 输入 { padding-left: 40px; }
input { border: none; }
删除输入边框并将边框添加到 #input-container { border: 1px solid #000; }
以使其看起来像图像在内部并且实际上是输入的一部分。
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}
将上述标签添加到您的 CSS 文件中并使用指定的类。
这对我有用:
input.valid { 边框颜色:#28a745; padding-right: 30px;背景图像:url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');背景重复:不重复;背景尺寸:20px 20px;背景位置:右中心; }
您可以试试这个: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 类作为您的输入,然后进行相应的自定义:
.inp-icon { 背景: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;背景尺寸:16px; }
我用下面的代码实现了这一点。
首先,您弯曲容器,使输入和图标位于同一行。对齐项目使它们处于同一水平。
然后,不管怎样,让输入占据 100% 的宽度。给图标绝对定位,使其与输入重叠。
然后在输入中添加右填充,这样输入的文本就不会到达图标。最后使用 right
css 属性为图标从输入边缘留出一些空间。
注意:如果您正在使用 ReactJs,Icon
标签可能是一个真正的图标,或者是您在项目中使用图标的任何其他方式的占位符。
.inputContainer { 显示:弹性;对齐项目:居中;位置:相对; } .input { 宽度:100%; padding-right: 40px; } .inputIcon { 位置:绝对;右:10px; }
只需在 CSS 中使用背景属性。
<input id="foo" type="text" />
#foo
{
background: url(/img/foo.png);
}
我有这样的情况。由于 background: #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;
}
顺便提一下,border
、padding
和 text-align
属性对于解决方案并不重要。我只是复制了我的原始代码。
background
是一个简写的属性名称,您可以使用它来一次覆盖所有背景属性:background: [color] [image url] [repeat] [position]
,这就是您的颜色被覆盖的原因一切。您也可以将其留在原处并将属性重命名为 background-color
background
是一个简写属性名称。更好的解决方法是不使用速记,而是使用 background-color
作为颜色属性(假设您需要颜色和图像)。
与字体图标一起使用
<input name="foo" type="text" placeholder="">
或者
<input id="foo" type="text" />
#foo::before
{
font-family: 'FontAwesome';
color:red;
position: relative;
left: -5px;
content: "\f007";
}
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>
例如,您可以使用:带有隐藏输入的标签(存在图标)。
我可以通过 CSS 将图标添加为背景图像,从而将图标添加到输入字段。从那里,您可以使用 background-size 属性调整图像的大小,最后,使用 background-position-x 和 background-position-y 属性定位元素。我在下面分享了一个代码片段,并在此处链接到 Codepen 中的一个工作示例:
身体{边距:0;填充:0;字体系列:无衬线; } .input-container { 填充:50px; } 输入 { 框大小:边框框;宽度:250px;填充左:36px;高度:48px;背景图像:url('https://image.shutterstock.com/image-vector/apple-icon-vector-fruit-symbol-260nw-1466147615.jpg');背景尺寸:20px;背景位置-x:10px;背景位置-y:50%;背景重复:不重复;边框半径:15px; }
https://codepen.io/Iram_Tech/pen/GRQqrNg
我不想更改输入文本的背景,它也不会与我的 SVG 图标一起使用。
我所做的是为图标添加负边距,使其出现在输入框中
并向输入添加相同的值填充,因此文本不会位于图标下方。
<div class="search-input-container">
<input
type="text"
class="search-input"
style="padding-right : 30px;"
/>
<img
src="@/assets/search-icon.svg"
style="margin-left: -30px;"
/>
</div>
*inline-style 是为了可读性考虑使用类
.input_container { 显示:弹性;边框底部:实心 1px 灰色;过渡:边框颜色 0.1s 缓入;背景:白色; } .input { 颜色:蓝色;显示:块;宽度:计算(100% - 20px);边框:无;大纲:无;填充:8px 16px; } .input_img { 弹性基础:20px;显示:内联块;填充:8px 16px;光标:指针; }
您可以采用不同的方法,该方法还允许您单击它并让它发挥作用。看看下面的例子:
<div id="search-bar">
<input placeholder="Search or Type a URL">
<button><i class="fas fa-search"></i></button>
</div>
#search-bar {
display: flex;
justify-content: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 60px;
}
#search-bar > input {
width: 750px;
font-size: 30px;
padding: 20px;
border-radius: 50px 0px 0 50px;
border: none;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
background: #fff; /* CSS Edit Here */
}
#search-bar > button {
background: #fff;
border: none;
font-size: 30px;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-radius: 0 50px 50px 0 ;
padding-right: 20px;
}
css 后台解决方案在大多数情况下都可以做到这一点,但它在图标消失的 webkit (chrome) 自动完成方面存在问题。
还有其他解决方案,包括通过将输入包装在 div 中并添加额外元素(img、div 或类似元素)来更改 html/dom 结构。我不喜欢解决方案,因为您需要使用绝对位置调整元素 css 和/或按像素调整大小以获得正确的位置。或者重新创建输入边框以“合并”输入和 img 合二为一。
所以这个解决方案是基于css背景图像而不是应用在输入元素上,而是应用在一个包装器div上。
HTML:
<div class="input-email">
<input type="text" placeholder="Email" name="email" id="email">
</div>
CSS:
.input-email {
background: url(/assets/images/email.svg) no-repeat scroll 14px 11px;
display: inline-block;
}
.input-email input{
padding-left: 40px;
background-color: transparent !important;
}
input:-webkit-autofill, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
}
通过这种方式,使用 .input-email 类,我将我的图标图像定义为 div 背景(不受 webkit 自动完成背景的影响)。下一个 .input-email 输入定义我填充了输入元素以为图像留出空间并将其设置为透明(这在不应用自动完成时有效)最后使用 webkit-autofill 类,我通过转换删除由设置的背景颜色自动完成。
注意:在第 2 点,我设置了透明的 !important,因为这个 -internal-autofill-selected 会在浏览器中呈现,如果不将 my 也设置为 !important,我就无法覆盖它:
input:-internal-autofill-selected {
background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
}
我从这篇文章 https://www.py4u.net/discuss/1069380 中得到了我的解决方案,我做了一些调整,尽管主要功劳归于他们。
这适用于我或多或少的标准形式:
<button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>
不定期副业成功案例分享