iOS บังคับให้มุมโค้งมนและแสงสะท้อนที่อินพุต

อุปกรณ์ iOS เพิ่มรูปแบบที่น่ารำคาญมากมายให้กับอินพุตแบบฟอร์มโดยเฉพาะอย่างยิ่งในอินพุต [type = submit] ที่แสดงด้านล่างนี้เป็นรูปแบบการค้นหาทั่วไปแบบเดียวกันบนเบราว์เซอร์เดสก์ท็อปและบน iPad

เดสก์ทอป:

iPad:

อินพุต [type = text] ใช้เงาแทรกกล่อง CSS และฉันยังระบุ -webkit-border-radius: none; ซึ่งดูเหมือนจะถูกลบล้าง สีและรูปร่างของปุ่ม [type = submit] อินพุตของฉันถูกทำลายอย่างสมบูรณ์บน iPad มีใครรู้บ้างว่าฉันจะแก้ไขปัญหานี้ได้อย่างไร ขอบคุณล่วงหน้า.

เวอร์ชันที่ฉันใช้งานได้คือ:

input {
    -webkit-appearance: none;
}

ในเบราว์เซอร์ Webkit บางเวอร์ชันคุณอาจต้องเผชิญกับปัญหาที่border-radiusยังคงอยู่ รีเซ็ตด้วยสิ่งต่อไปนี้:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

นี้สามารถขยายไปใช้กับทุกสไตล์ WebKit formส่วนประกอบเช่นinput, select, หรือbuttontextarea

ในการอ้างอิงคำถามเดิมคุณจะไม่ใช้ค่า 'none' เมื่อล้างองค์ประกอบ css ตามหน่วยใด ๆ นอกจากนี้ยังทราบว่าหนังเรื่องนี้ช่องทำเครื่องหมายใน Chrome ดังนั้นบางทีใช้สิ่งที่ต้องการinput[type=text]หรือหรือแทนกรองผู้ที่ไม่ได้ใช้การตั้งค่ามุมโค้งมนเช่นinput[type=submit], input[type=text]input:not([type=checkbox]), input:not([type=radio])

คุณสามารถกำจัดรูปแบบ webkits อินพุตและอื่น ๆ ได้ด้วยสิ่งนี้:

input, textarea, select {
   -webkit-appearance: none;
}

สำหรับปุ่มส่งอย่าใช้:

<input type="submit" class="yourstylehere" value="submit" />

ใช้แท็กปุ่มแทน:

<button type="submit" class="yourstylehere">Submit</button>

สิ่งนี้ได้ผลสำหรับฉัน

ดูเพื่อnormalize.css

มีการสาธิตที่คุณสามารถทดสอบองค์ประกอบแบบฟอร์มและดูว่ามีลักษณะอย่างไรใน iOS มีคุณสมบัติเชิง webkit หลายรายการ

นี่คือสิ่งที่ฉันใช้ในโครงการของฉัน

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}

นอกจากนี้คุณยังพบปัญหานี้ในบางเบราว์เซอร์หากคุณมีสิ่งต่อไปนี้:

<a class="btn btn-primary" href="#" type="button">Link</a>

แทน:

<a class="btn btn-primary" href="#" role="button">Link</a>

นี้สามารถเกิดขึ้นได้ถ้าคุณเปลี่ยนองค์ประกอบเข้าของคุณสำหรับองค์ประกอบ Anker และลืมที่จะเปลี่ยนไปtyperole

ฉันมีปัญหานี้ทั้งบน Chrome และ Safari บน iPad ของฉัน