我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
当前回答
我不想改变我的输入文本的背景,也不会与我的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>
*内联风格是为了可读性考虑使用类
其他回答
这对我来说很管用:
输入。有效的{ 边框颜色:# 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" /> > < /形式
我用下面的代码实现了这一点。
首先,你弯曲容器,使输入和图标在同一行。对齐物品可以使它们处于同一水平线上。
然后,使输入占用宽度的100%。给出图标的绝对位置,使其与输入重叠。
然后为输入添加右填充,这样输入的文本就不会到达图标。最后使用css属性给图标留出一些距离输入框边缘的空间。
注意:Icon标签可以是一个真正的图标,如果你是在ReactJs中工作,也可以是一个占位符,用于你在项目中使用图标的任何其他方式。
.inputContainer { 显示:flex; 对齐项目:中心; 位置:相对; } .input { 宽度:100%; padding-right: 40像素; } .inputIcon { 位置:绝对的; 右:10 px; } < div class = " inputContainer”> <input class="input" /> <图标类="inputIcon" /> < / div >
.input_container { display: flex; border-bottom: solid 1px grey; transition: border-color 0.1s ease-in; background: white; } .input { color: blue; display: block; width: calc(100% - 20px); border: none; outline: none; padding: 8px 16px; } .input_img { flex-basis: 20px; display: inline-block; padding: 8px 16px; cursor: pointer; } <div class="input_container"> <input type="text" class="input" value> <span class="input_img" data-role="toggle"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M8 9C7.44772 9 7 9.44771 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44771 16.5523 9 16 9H8Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM5 18V7H19V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z" fill="currentColor" /> </svg> </span> </div>
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 autocomplete背景的影响)。 我将input元素的左侧填充为图像提供空间,并将其设置为透明(当不应用自动完成时,这是有效的) 最后,在webkit-autofill类中,我删除了自动补全设置的背景色。
注意:在第2点我设置了transparent !important,因为-internal-autofill-selected会在浏览器中呈现,如果不设置我的also为!我就无法覆盖它。
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得到了我的解决方案 我做了一些调整,虽然主要的功劳是他们。
没有背景图片的解决方案:
.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">