ตามค่าเริ่มต้นดูเหมือนว่า Mobile Safari จะเพิ่มเงาด้านในสุดให้กับฟิลด์อินพุตทั้งหมดรวมถึง textarea มีวิธีลบหรือไม่
มันน่าเกลียดโดยเฉพาะอย่างยิ่งเมื่อคุณมีพื้นหลังสีขาว
ตามค่าเริ่มต้นดูเหมือนว่า Mobile Safari จะเพิ่มเงาด้านในสุดให้กับฟิลด์อินพุตทั้งหมดรวมถึง textarea มีวิธีลบหรือไม่
มันน่าเกลียดโดยเฉพาะอย่างยิ่งเมื่อคุณมีพื้นหลังสีขาว
คำตอบ:
โดยการเพิ่มรูปแบบ css นี้:
-webkit-appearance: none;textarea, input[type="text"], input[type="submit"]วิธีที่ดีที่สุดที่จะใช้ก็คือการใช้มันเท่านั้นที่จะ
input[type="password"]เช่นกัน
[type="email"]ด้วย!
input:not([type=checkbox]):not([type=radio])
ในขณะที่เพิ่มสไตล์ CSS
-webkit-appearance: none;จะทำงานมันกำจัดทุกอย่าง คุณอาจต้องการลองนี้แทน:
box-shadow: none !important;วิธีนี้ทำให้ลูกศรชี้ลง
นี่คือทางออกที่ง่าย
input[type=text] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}บางครั้งคุณสามารถมีสไตล์ชีตมียากจนดังนั้นวิธีที่จะแก้ไขได้เมื่อที่เกิดขึ้นคือการใช้งานappearance: none; caretวิธีที่ดีที่สุดคือการเขียนรหัสของคุณใหม่และค้นหาว่าส่วนใดของรหัสของคุณที่ทำให้รูปแบบยุ่งเหยิงnone
ก่อนที่จะใช้caretคุณต้องรู้ว่ามันอาจทำให้คุณมีปัญหากับสไตล์อื่น ๆ
-webkit-appearance: caret;
-moz-appearance: caret;
-o-appearance: caret;
appearance: caret;หมายเหตุ: การใช้
noneงานcaretไม่ใช่สิ่งที่ดีที่สุด
https://stackoverflow.com/a/51626446/9287284
background-clip: padding-box;
และฉันก็พบคำตอบเดียวกันที่เก่ากว่าแสดงความคิดเห็นที่นี่
การตั้งค่าอย่างใดอย่างหนึ่งbackgroundและborderคุณสมบัติ CSS ของinputแท็กก็ดูเหมือนว่าจะทำงาน
ลองสิ่งนี้:
<style>
input {
background: #ccc;
border: none;
}
</style>
<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>