在这种情况下，如何为文本字段内的放大镜图像应用 1px 纯左边框？它不是分开的。
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 260px;
padding: 5px;
padding-right: 40px;
outline: none;
border: 1px solid #E5E5E5;
border-radius: 5px;
background-color: #FFF;
font-family: Arial;
font-size: 12px;
background-position: 280px 2px;
background-image: url('http://localhost/icon.png');/* HERE */
background-repeat: no-repeat;
}
input[type=text]:focus {
background-color: #FFFFFF;
border-color: #ccc;
box-shadow: 0px 0px 3px -1px #ccc;
<!-- background-position: 270px -80px; -->
}
body {
padding: 10px;
background-color: #FFF;
}
</style>
</head>
<body>
<form>
<div id="mainContent">
<input placeholder="Enter product name..." type="text"> <br>
</div>
</form>
</body>
</html>
最佳答案
最简单的方法是在 png 本身中绘制边框。
关于css - 文本字段内背景图像的边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13007456/