Place icon inside HTML input element using CSS

Last Reply 8 months ago By dharmendr

Posted 8 months ago

Hi All, I am having a table like below I wanted to align the span values as right align but its not aligning

for Example the input Password has a span element Forgot

similarly I want for Username maintaining the input width same for all...

I want to add the value "@" in Username similar to forgot.

<table>
    <tr>
        <td><input type="text"><span>1000</span></td>
        <td><input type="text"><span>%</span></td>
    </tr>
</table>

CSS:

td span
{
    float:right;
    position:absolute;
    margin-left:-35px;
    text-align:right;
}
td span:first-child
{
    float:left;
    color:red
}

Regards, Sowmia

Posted 8 months ago

Hi Sowmia,

Check this example. Now please take its reference and correct your code.

<style type="text/css">
    td
    {
        position: relative;
    }
    input
    {
        padding-right: 30px;
    }
    span
    {
        position: absolute;
        right: 5px;
    }
</style>
<table>
    <tr>
        <td>
            <input type="text" id="txtUserName" /><span>@</span>
        </td>
        <td>
            <input type="text" id="txtPercentage" /><span>%</span>
        </td>
    </tr>
</table>

Demo