ปิดใช้งานปุ่มหมุนของ webkit บนประเภทอินพุต =“ number” หรือไม่

203

ฉันมีเว็บไซต์ที่เป็นหลักสำหรับผู้ใช้มือถือ แต่เดสก์ท็อปด้วย

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

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

เป็นไปได้หรือไม่ที่จะปิดใช้งานสิ่งนี้ด้วย-webkit-appearanceหรือใช้ CSS เคล็ดลับอื่น ๆ ? ฉันได้ลองโดยไม่มีโชคมาก

css html webkit

— POJO
แหล่งที่มา

15

หากคุณต้องการใช้type="text"ด้วยเหตุผลอื่นและเปลี่ยนเป็นตัวเลขสำหรับคุณสมบัติแป้นพิมพ์ตัวเลขเท่านั้นคุณสามารถใช้pattern="[0-9]*"เพื่อรับคุณสมบัติแป้นพิมพ์เพื่อให้คุณรักษาไว้type="text"ได้ ดูstackoverflow.com/questions/6171903/…

— joshuahedlund

114

css ด้านล่างใช้ได้กับทั้ง Chrome และ Firefox

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;
}

— Rolwin Crasta
แหล่งที่มา

8

ทางออกที่ดีกว่าด้านบน (สมบูรณ์มากขึ้น)

— aqm

-moz-ลักษณะ: TextField; นอกจากนี้เป็นคำตอบเดียวที่ทำงานสำหรับฉัน ขอบคุณ!

— Nanoripper

283

ฉันค้นพบว่ามีส่วนที่สองของคำตอบนี้

ส่วนแรกช่วยฉัน แต่ฉันยังมีพื้นที่ทางด้านขวาของtype=numberข้อมูลของฉัน ฉันได้ปรับระยะขอบของอินพุตให้เป็นศูนย์ แต่เห็นได้ชัดว่าฉันต้องตั้งค่าระยะขอบของสปินเนอร์ด้วยเช่นกัน

มันคงที่:

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

— Bob Spryn
แหล่งที่มา

น่ากลัว ฉันมีปัญหาที่คล้ายกันแต่ด้วยกลยุทธ์ CSS ที่แตกต่างกันเล็กน้อยซึ่งนำไปสู่ปัญหาใหม่ทั้งหมด ...

— Lukas Eder

1

ไม่มีใครรู้วิธีการแก้ไขพฤติกรรมการเลื่อนที่คุณสามารถเลื่อนขึ้นและลงอย่างไม่มีที่สิ้นสุด? ฉันได้ตั้งค่าmin=0.01(และmaxเป็นค่าโดยพลการ) ในองค์ประกอบอินพุตของฉัน แต่ฉันต้องการเลื่อนล้อเลื่อนเพียงขึ้นและลงหน้า ฉันใช้ AngularJS และฉันไม่พบอะไรเลย atm

— JaKXz

2

การเชื่อมโยงกลับไปยังแหล่งข้อมูลที่เชื่อถือได้สำหรับปัญหาเฉพาะนี้และข้อมูลประเภทนี้: css-tricks.com/snippets/css/turn-off-number-inumber-spinners

— Josh Habdas

1

เพื่อความชัดเจนนี่ไม่ได้เป็นการลบฟังก์ชั่นการเลื่อนเมาส์!

— babalu

1

-moz-Appearance: ฟิลด์ข้อความสำหรับ Firefox

— Kevin Suttle

16

ไม่แน่ใจว่านี่เป็นวิธีที่ดีที่สุดในการทำสิ่งนี้หรือไม่ แต่สิ่งนี้ทำให้ผู้ปั่นหายไปบน Chrome 8.0.552.5 dev:

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

— robertc
แหล่งที่มา

@JethroLarson มันใช้งานไม่ได้เหรอ? คุณสามารถลอง-webkit-outer-spin-buttonแทน

— robertc

สิ่งนี้ใช้งานได้ดีเยี่ยมสำหรับ type = "date": input [type = date] :: - ปุ่ม webkit-outer-spin-{{- webkit- ลักษณะที่ปรากฏ: none; }

— uglymunky

11

ดูเหมือนเป็นไปไม่ได้ที่จะป้องกันไม่ให้เหยื่อปรากฏใน Opera เพื่อเป็นการชั่วคราวคุณสามารถหาที่ว่างสำหรับเหยื่อ เท่าที่ฉันสามารถบอกได้ CSS ต่อไปนี้เพิ่มการเติมพอเพียงเฉพาะใน Opera:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}

— Goulven
แหล่งที่มา

4

@Kuu แน่นอน แต่มันก็คุ้มค่าที่จะกล่าวถึงที่นี่เพราะรหัสในคำตอบทำให้อินพุตไม่สามารถใช้ได้กับ Opera

— Goulven

4

@ Goulvench โปรดอย่า :) ฉันพบว่ามันมีประโยชน์มากคนอื่นอาจเช่นกัน

— frnhr

-2

คุณสามารถซ่อนสปินเนอร์ด้วยเคล็ดลับต่อไปนี้:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}

— Sébastien Varinois
แหล่งที่มา