在表单的输入元素中放入图标

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

现场版本:潮汐力主题

当前回答

这对我来说很管用:

输入。有效的{ 边框颜色:# 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" /> > < /形式

2018-09-03 22:03:21

其他回答

您链接的站点使用了CSS技巧的组合来实现这一点。首先，它为<input>元素使用背景图像。然后，为了将光标移过去，它使用左填充。

换句话说，它们有这两条CSS规则:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

2009-05-27 19:42:27

.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>

2021-04-08 08:43:01

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

.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">

2016-10-26 11:30:41

我能够通过CSS将图标作为背景图像添加到输入字段中。从那里，您可以使用background-size属性调整图像的大小，最后，使用background-position-x和background-position-y属性定位元素。我在下面分享了一个代码片段，并链接到Codepen中的一个工作示例:

body { margin: 0; padding: 0; font-family: sans-serif; } .input-container { padding: 50px; } input { box-sizing: border-box; width: 250px; padding-left: 36px; height: 48px; background-image: url('https://image.shutterstock.com/image-vector/apple-icon-vector-fruit-symbol-260nw-1466147615.jpg'); background-size: 20px; background-position-x: 10px; background-position-y: 50%; background-repeat: no-repeat; border-radius: 15px; } <!DOCTYPE> <html> <head> <title>Icon Inside Input Field</title> </head> <body> <div class="input-container"> <label for="email"><p>Email:</p></label> <input type="text" name="email" id="email" placeholder="iram.the.goat@mailer.com"> </div> </body> </html>

https://codepen.io/Iram_Tech/pen/GRQqrNg

2022-05-11 01:31:24

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

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

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

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

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

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

2020-10-08 20:15:17

在表单的输入元素中放入图标

推荐文章

最新文章

标签