Right align text in TextBox with symbols at the end in CSS

Rockstar...

SOLVED CLOSED ACTIVE ANSWERED
User: Rockstar8
Posted: on Oct 22, 2018 11:45 PM
Forum: HTML and CSS
Answer: 1
Views: 3456
Sample Code: Download

Good Day,

I am trying to display a textbox like below,

https://www.aspforums.net/Threads/130946/Place-icon-inside-HTML-input-element-using-CSS/Demos/3

I tried the above its working fine but my value inside the textbox is right-aligned, the value is overriding on the symbols. Is there any solution for this.

<td>
    <input id="country" class="custom2">
    <span class="right_textbox">Country</span>
</td>
<td>
    <input id="city" class="custom2">
    <span class="right_textbox">City</span>
</td>
 
.custom{
    text-indent:60px;
    direction:rtl;
}
 
.right_textbox {
    width:15%;
    position: absolute; 
    right:18%; 
    height: 20px; 
    padding: 5px;
    border-left: 1px solid #ddd; 
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>
$(document).ready(function () { 
    $(".custom2").inputmask({
        'alias': 'decimal',
        rightAlign: true,
        'groupSeparator': '.',
        'autoGroup': true
    });
});

Thanks.

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Oct 23, 2018 02:53 AM
Report

Hi Rockstar8,

Refer below sample code.

HTML

<style type="text/css">
    td
    {
        position: relative;
    }
    input
    {
        padding-right: 60px;
        text-align: right;
    }
    span
    {
        position: absolute;
        right: 5px;
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".custom2").inputmask({
            'alias': 'decimal',
            rightAlign: false,
            'groupSeparator': '.',
            'autoGroup': true
        });
    });
</script>
<table>
    <tr>
        <td>
            <input type="text" id="country" class="custom2" /><span>Country</span>
        </td>
        <td>
            <input type="text" id="city" class="custom2" /><span>City</span>
        </td>
    </tr>
</table>

Demo

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

Right align text in TextBox with symbols at the end in CSS

Company

Explore

Follow us

Contact Us