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

我能够通过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

这对我来说很管用:

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

你可以试试这个:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

2009-05-27 19:43:21

我能够通过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

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

.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解决方案是实现这一目标的最佳方法。

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

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

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

2009-05-27 19:48:14

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

推荐文章

最新文章

标签