ซ่อน Spinner ใน Input Number - Firefox 29

ใน Firefox 28 ฉันใช้<input type="number">งานได้ดีเพราะมันแสดงแป้นพิมพ์ตัวเลขในฟิลด์อินพุตซึ่งควรมีตัวเลขเท่านั้น

ใน Firefox 29 การใช้ตัวเลขอินพุตจะแสดงปุ่มหมุนที่ด้านขวาของฟิลด์ซึ่งดูเหมือนว่าไร้สาระในการออกแบบของฉัน ฉันไม่ต้องการปุ่มเพราะมันไร้ประโยชน์เมื่อคุณต้องการเขียนบางอย่างเช่นหมายเลข 6 ~ 10 หลัก

เป็นไปได้หรือไม่ที่จะปิดการใช้งานด้วย CSS หรือ jQuery

ตามที่โพสต์บล็อกนี้คุณจะต้องตั้งอยู่บน-moz-appearance:textfield;input

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" step="0.01"/>

เป็นค่าที่ชี้ให้เห็นว่าค่าเริ่มต้นของ-moz-appearanceองค์ประกอบเหล่านี้อยู่number-inputใน Firefox

หากคุณต้องการที่จะซ่อนปั่นโดยเริ่มต้นคุณสามารถตั้งค่า-moz-appearance: textfieldแรกและถ้าคุณต้องการปินเนอร์ที่จะปรากฏบน:hover/ คุณสามารถเขียนทับจัดแต่งทรงผมก่อนหน้านี้มี:focus-moz-appearance: number-input

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

<input type="number"/>

ฉันคิดว่าบางคนอาจพบว่ามีประโยชน์เพราะเมื่อเร็ว ๆ นี้ฉันต้องทำสิ่งนี้เพื่อพยายามปรับปรุงความสอดคล้องระหว่าง Chrome / FF (เนื่องจากนี่เป็นวิธีป้อนข้อมูลตัวเลขตามค่าเริ่มต้นใน Chrome)

หากคุณต้องการดูค่าทั้งหมดที่มีให้-moz-appearanceคุณสามารถค้นหาได้ที่นี่ (mdn)

ในSASS/ SCSSสไตล์คุณสามารถเขียนเช่นนี้

input[type='number'] {
  -moz-appearance: textfield;/*For FireFox*/

  &::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
    -webkit-appearance: none;
    margin: 0;
  }
}

สไตล์รหัสนี้สามารถใช้ได้PostCSSแน่นอน

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


/* for mozilla */  
   input[type=number] {-moz-appearance: textfield;}

ต้องเผชิญกับปัญหาโพสต์เดียวกันอัปเดต Firefox เป็น 29.0.1 นี่เป็นรายการที่นี่ https://bugzilla.mozilla.org/show_bug.cgi?id=947728

Solutions: พวกเขา (พวก Mozilla) มีการแก้ไขนี้โดยการแนะนำการสนับสนุนสำหรับ "-moz ปรากฏตัว" <input type="number">สำหรับ คุณเพียงแค่ต้องมีสไตล์ที่เกี่ยวข้องกับช่องใส่ของคุณด้วย " -moz-appearance:textfield;"

ฉันชอบวิธี CSS เช่น: -

.input-mini{
-moz-appearance:textfield;}

หรือ

คุณสามารถทำแบบอินไลน์ได้เช่นกัน:

<input type="number" style="-moz-appearance: textfield">

ฉันผสมคำตอบสองสามข้อจากคำตอบด้านบนและจากวิธีลบลูกศรออกจากอินพุต [type = "number"] ใน Opera ใน scss:

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

    &:hover,
    &:focus {
      -moz-appearance: number-input;
    }
  }
}

Tested on chrome, firefox, safari

สิ่งนี้ใช้ได้กับฉัน:

    input[type='number'] {
    appearance: none;
}

แก้ไขได้ใน Firefox, Safari, Chrome นอกจากนี้ยัง-moz-appearance: textfield;ไม่ได้รับการสนับสนุนอีกต่อไป ( https://developer.mozilla.org/en-US/docs/Web/CSS/appearance )