How can I apply a 1px solid left border for the magnifying glass image that’s inside my text field in this case? It isn’t separate.
<!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>
The easiest way is to draw the border in the png itself.