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

آموزش مخفی کردن فلش های 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;
}

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد.

cp-codfk

نظرات ثبت شده ۱ دیدگاه

    1. amir کاربر مهمان گفت:

      سلام ببخشید چطور میشه کاری کرد که بدون اینکه روش کلیک بشه فلش ها دیده بشه

      00
توضیحات پیشنهادی نظرات اشتراک