آموزش مخفی کردن فلش های input number در HTML

مخفی کردن جهت های input number در HTML
حذف جهت های تغییر مقدار از اطراف اینپوت عددی با استفاده از CSS

به طور پیشفرض در اطراف input number، دو فلش رو به بالا و پایین قرار دارد که به کاربر اجازه می‌دهد تا بتواند مقدار داخل اینپوت را بدون وارد کردن از طریق کیبورد و با کلیک ماوس، تغییر دهد. اما شاید نخواهید شاهد چنین چیزی باشید! بنابراین در ادامه با فول کده همراه باشید.

قطعه کد

کلاس CSS زیر را اضافه کرده و آن را به input مورد نظر اختصاص دهید:

.inp-no-arrows::-webkit-outer-spin-button,
.inp-no-arrowst::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.inp-no-arrowst {
    -moz-appearance:textfield;
}

و اگر می‌خواهید برای تمامی input number ها به صورت پیشفرض اعمال کنید، می‌توانید کد CSS زیر را اضافه کنید:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}