номер типа html не будет перемещаться

В настоящее время я пытаюсь переместить это поле ввода числа в место в css, используя coridnates, и до сих пор ничего из того, что я вводил, не сработало. Я пытался:

top: 30%;
top: 30px;
right: 40%;
right: 40px;

в каждой вещи css, и до сих пор ни одна из них не переместила эту вещь, вот ее часть html

HTML:

<input class="checkout-delay" type="number" min="0" value="0">

CSS:

.checkout-delay {
    bottom: 30px;
    background-color: #bf0d33;
    color: white;
    font-weight: bolder;
    border-color: #900926;
    height: 15px;
    width: 25px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
   margin: 0;
}

.input[type="number"] {
    padding: 0 0 0 6px;
    -moz-appearance: textfield;
}

Я ценю любой ответ и заранее благодарю вас.

(PS. Я также хотел бы иметь возможность настроить стрелки, увеличив их и изменив цвет, но это кажется невозможным из того, что я читал в Интернете об этом, но если вы знаете, как я был бы признателен за помощь. Спасибо. .)