هل يمكنني إخفاء مربع الدوران لإدخال رقم HTML5؟

يضيف Firefox 29 حاليًا دعمًا لعناصر الأرقام ، لذا إليك مقتطف لإخفاء المغازل في متصفحات webkit و moz:

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

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

<input id="test" type="number">

اجابة قصيرة:

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

<input type="number" />

إجابة أطول:

للإضافة إلى الإجابة الحالية ...

ثعلب النار:

في الإصدارات الحالية من Firefox ، القيمة الافتراضية (وكيل المستخدم) للخاصية { -moz-appearance property } في هذه العناصر هي number-input. يؤدي تغيير ذلك إلى القيمة textfield بشكل فعال إلى إزالة الدوار.

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

في بعض الحالات ، قد ترغب في إخفاء الدوار في البداية ، ثم ظهوره في وضع التحويم/التركيز. (هذا هو السلوك الافتراضي حاليًا في Chrome). إذا كان الأمر كذلك ، يمكنك استخدام ما يلي:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

كروم:

في الإصدارات الحالية من Chrome ، القيمة الافتراضية (وكيل المستخدم) للخاصية { -webkit-appearance property } على هذه العناصر هي بالفعل textfield. لإزالة العنصر الدوار ، يجب تغيير قيمة خاصية -webkit-appearance إلى none في ::-webkit-outer-spin-button/::-webkit-inner-spin-button فئات زائفة (هي -webkit-appearance: inner-spin-button بشكل افتراضي).

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

<input type="number" />

تجدر الإشارة إلى أن margin: 0 يُستخدم لإزالة الهامش في الأقدم إصدارات Chrome.

حاليًا ، وحتى كتابة هذا ، يوجد هنا وكيل وكيل المستخدم الافتراضي في فئة "الزائفة الداخلية":

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

وفقًا لـ دليل ترميز تجربة مستخدم Apple لـ Safari للجوال ، يمكنك استخدام ما يلي لعرض لوحة مفاتيح رقمية في متصفح iPhone:

<input type="text" pattern="[0-9]*" />

ستعمل pattern of \d* أيضًا.

حاول استخدام input type="tel" بدلاً من ذلك. ينبثق لوحة مفاتيح بها أرقام ، ولا تظهر مربعات الدوران. لا يتطلب جافا سكريبت أو CSS أو ملحقات أو أي شيء آخر.

فقط إضافة هذا المغلق لإزالة الدوار على إدخال الرقم

/* For Firefox */

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



/* Webkit browsers like Safari and Chrome */

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

لقد واجهت هذه المشكلة مع input[type="datetime-local"] ، وهو مشابه لهذه المشكلة.

لقد وجدت طريقة للتغلب على هذا النوع من المشاكل.

أولاً ، يجب عليك تشغيل ميزة جذر الظل من Chrome من خلال "DevTools -> الإعدادات -> عام -> العناصر -> إظهار وكيل المستخدم ظل DOM"

ثم يمكنك رؤية جميع عناصر DOM المظللة ، على سبيل المثال ، بالنسبة لـ <input type="number"> ، العنصر الكامل مع DOM المظلل هو:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

ووفقًا لهذه المعلومات ، يمكنك صياغة بعض CSS لإخفاء العناصر غير المرغوب فيها ، تمامًا كما قالJosh.

هذا هو أفضل إجابة وأود أن أقترح على الماوس فوق وبدون الماوس فوق

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }

ليس ما طلبته ، لكنني أفعل ذلك بسبب وجود خلل في التركيز في WebKit مع صناديق spinboxes:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

قد يعطيك فكرة للمساعدة فيما تحتاج إليه.

على Firefox لأوبونتو ، فقط باستخدام

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

لم الحيلة بالنسبة لي.

مضيفا

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

سوف يقودني إلى

فئة زائفة غير معروفة أو عنصر زائف '-webkit-external-spin-button' تم تجاهل Ruleset بسبب محدد سيئ.

في كل مرة حاولت. نفس الشيء بالنسبة إلى زر الدوران الداخلي.

لجعل هذا العمل في Safari وجدت أنه من المهم إضافة ضبط مجموعة الويب أن يكون زر الدوران مخفيًا.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

ما زلت أواجه مشكلة في إيجاد حل لأوبرا أيضًا.

ربما قم بتغيير إدخال الرقم باستخدام javascript إلى إدخال النص عندما لا تريد تدورًا ؛

document.getElementById('myinput').type = 'text';

ووقف المستخدم إدخال النص.

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

ثم قم بتغيير جافا سكريبت مرة أخرى في حال كنت ترغب في الدوار.

document.getElementById('myinput').type = 'number';

عملت بشكل جيد لأغراضي

يمكنك استخدام هذا الكود البسيط في ملف CSS الخاص بك:

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