Put image icon inside TextBox using CSS

Last Reply 27 days ago By dharmendr

Posted 27 days ago

Please any example on how to put image icon inside textbox

 

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

 

You are viewing reply posted by: dharmendr 27 days ago.
Posted 27 days 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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html