New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Separate spinner buttons of NumericTextBox


Product RadNumericTextBox for ASP.NET AJAX


This article shows how with JavaScript and CSS the button for decreasing the value can be placed on the left side of the input as demonstrated below.



<telerik:RadNumericTextBox RenderMode="Lightweight" WrapperCssClass="custom-buttons" runat="server" 
ID="RadNumericTextBox1" Width="190px" Value="1" EmptyMessage="Enter units count" 
MinValue="0" ShowSpinButtons="true" NumberFormat-DecimalDigits="0">
    <ClientEvents OnLoad="OnLoad" />
function OnLoad(sender, args) {
    var $ = $ || $telerik.$;
    var spanFake = $("<span>").addClass("riSelect fake-riSelect").append($(sender.SpinDownButton))
.RadInput.riContSpinButtons.custom-buttons input {
    padding-left: 38px;

.RadInput.riContSpinButtons.custom-buttons .riUp,
.RadInput.riContSpinButtons.custom-buttons .riDown {
    height: 100%;

    .RadInput.riContSpinButtons.custom-buttons .riUp:before,
    .RadInput.riContSpinButtons.custom-buttons .riDown:before {
        vertical-align: middle;

.RadInput.custom-buttons .riSelect.fake-riSelect {
    width: 30px;
    left: 0;

    .RadInput.custom-buttons .riSelect.fake-riSelect .riDown {
        border-right-width: 1px;
        border-right-style: solid;
In this article
Not finding the help you need? Improve this article