Put image icon inside TextBox using CSS

Last Reply one year ago By dharmendr

Posted one year ago

Please any example on how to put image icon inside textbox

 

 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

 

Posted one year ago

Hi micah,

Refer the below sample. You can use background image to display the image inside the textbox or simply apply the css to display an image inside the textbox.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .dvImageTextBox
        {
            position: relative;
            width: 240px;
        }
        .dvImageTextBox input
        {
            border: none: background:#fff;
            display: block;
            width: 100%;
            box-sizing: border-box;
        }
        .dvImageTextBox img
        {
            position: absolute;
            top: 2px;
            right: 5px;
        }
        .inputImage
        {
            background: #FFFFFF url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/16/Start-Menu-Search-icon.png') no-repeat top right;
        }
    </style>
</head>
<body>
    <div class="dvImageTextBox">
        <input name="TextBox1" type="text" id="TextBox1" />
        <img src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/16/Start-Menu-Search-icon.png"
            height="17px" width="25px" />
    </div>
    <input type="text" id="name" class="inputImage" />
</body>
</html>

Demo