ลบเงาอินพุต iOS

บน iOS (Safari 5) ฉันต้องทำตามสำหรับองค์ประกอบอินพุต (เงาด้านในด้านบน):

ฉันต้องการลบเงาด้านบน แต่จุดบกพร่อง-webkit-appearanceไม่ได้บันทึก

รูปแบบปัจจุบันคือ:

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

คุณจะต้องใช้-webkit-appearance: none;เพื่อลบล้างรูปแบบ IOS เริ่มต้น อย่างไรก็ตามการเลือกเพียงinputแท็กใน CSS จะไม่แทนที่รูปแบบ IOS เริ่มต้นเพราะ IOS input[type=text]เพิ่มรูปแบบของมันโดยใช้ตัวเลือกแอตทริบิวต์ ดังนั้น CSS ของคุณจะต้องใช้ตัวเลือกแอตทริบิวต์เพื่อแทนที่สไตล์ IOS CSS เริ่มต้นที่กำหนดไว้ล่วงหน้า

ลองสิ่งนี้:

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

ลิงก์ที่มีประโยชน์:

คุณสามารถเรียนรู้เพิ่มเติมได้appearanceที่นี่:

http://css-tricks.com/almanac/properties/a/appearance/

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกแอตทริบิวต์ CSS คุณสามารถค้นหาบทความที่ให้ข้อมูลได้ที่นี่:

http://css-tricks.com/attribute-selectors/

background-clip: padding-box;

ดูเหมือนจะลบเงาด้วย

ตามที่@davidpauljuniorกล่าวไว้; ระวังการตั้งค่า-webkit-appearanceบนตัวเลือกอินพุตทั่วไป

webkit จะลบคุณสมบัติทั้งหมด

-webkit-appearance: none;

ลองใช้คุณสมบัติ box-shadow เพื่อลบเงาขององค์ประกอบอินพุตของคุณ

box-shadow: none !important;

ฉันพยายามที่จะเกิดขึ้นกับการแก้ปัญหาที่ได้.) ทำงานและข.) ฉันสามารถที่จะเข้าใจว่าทำไมมันทำงาน

ฉันรู้ว่าเงาของอินพุต (และเส้นขอบโค้งมนสำหรับอินพุต [type = "search"]) มาจากภาพพื้นหลัง

เห็นได้ชัดว่าการตั้งค่าbackground-image: noneเป็นความพยายามครั้งแรกของฉัน แต่ดูเหมือนจะไม่ได้ผล

การตั้งค่าbackground-image: url()การทำงาน url()แต่ฉันยังคงกังวลเกี่ยวกับการมีที่ว่างเปล่า แม้ว่าตอนนี้จะเป็นแค่ความรู้สึกแย่ ๆ

background-clip: padding-box; ดูเหมือนจะทำงานได้ดี แต่หลังจากอ่านเอกสาร "background-clip" แล้วฉันก็ไม่เข้าใจว่าทำไมสิ่งนี้จึงลบพื้นหลังทั้งหมด

ทางออกที่ฉันชอบ:

background-image: linear-gradient(transparent, transparent);

นี่คือ css ที่ถูกต้องและฉันเข้าใจวิธีการทำงาน

ในขณะที่คำตอบที่ได้รับการยอมรับคือการเริ่มต้นที่ดีอย่างที่คนอื่น ๆ ชี้ให้เห็น แต่มันใช้ได้เฉพาะกับอินพุตที่มีtypeอยู่"text"เท่านั้น มีอินพุตประเภทอื่น ๆ อีกมากมายที่แสดงเป็นกล่องข้อความบน iOS ดังนั้นเราจำเป็นต้องขยายกฎนี้เพื่อพิจารณาประเภทอื่น ๆ เหล่านี้

นี่คือ CSS ที่ฉันใช้เพื่อกำจัดช่องป้อนข้อความและพื้นที่ข้อความของเงาด้านในในขณะที่ยังคงรักษารูปแบบเริ่มต้นสำหรับปุ่มช่องทำเครื่องหมายตัวเลื่อนช่วงรายการแบบเลื่อนลงวันที่ / เวลาและปุ่มตัวเลือกซึ่งทั้งหมดนี้เขียนขึ้นโดยใช้<input>แท็กต่ำต้อยด้วย .

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

วิธีนี้ใช้ได้ผลดีกว่าสำหรับฉัน นอกจากนี้ยังหมายความว่าฉันไม่จำเป็นต้องใช้กับอินพุตทุกประเภท (เช่นข้อความโทรศัพท์อีเมล ฯลฯ )

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}