ปิดการปัดเศษองค์ประกอบอินพุตของ iPhone / Safari

374

เว็บไซต์ของฉันแสดงผลได้ดีบนเบราว์เซอร์ iPhone / Safari โดยมีข้อยกเว้นข้อเดียว: ช่องป้อนข้อความของฉันมีลักษณะที่โค้งมนแปลก ๆ ซึ่งดูไม่ดีเลยสำหรับส่วนที่เหลือของเว็บไซต์ของฉัน

มีวิธีสอน Safari (ผ่าน CSS หรือข้อมูลเมตา) ไม่ให้ปัดเศษฟิลด์อินพุตและแสดงผลเป็นสี่เหลี่ยมตามที่ต้องการหรือไม่?

— อเล็กซ์
แหล่งที่มา

1

ฉันสงสัยว่าทำไมไม่มีการรีเซ็ต CSS ดูเหมือนจะมีกฎ CSS ที่ง่ายสุด ๆ มันคือสมอง

— Toskan

1

ฉันสร้าง CSS ขึ้นใหม่จริง ๆ โดยใช้ css รีเซ็ต 2 ของ eric meyer โดยเพิ่ม css ที่จำเป็นที่คุณพบในคำตอบที่นี่ มันมีอยู่ใน github: github.com/Jossnaz/JossiCssReset

— Toskan

1

ระวังด้วย-webkit-appearance: none;ฉันคิดว่าดีกว่าที่จะ จำกัด เงื่อนไขนี้กับขอบเขตขององค์ประกอบอินพุตเฉพาะ มิฉะนั้นจะสามารถซ่อนองค์ประกอบสัญญาณวิทยุได้หากคุณมีไว้ในหน้า

— quas

659

ใน iOS 5 และใหม่กว่านั้น ol ดี ' border-radiusทำเคล็ดลับ:

input {
    border-radius: 0;
}

หากคุณต้องลบมุมโค้งมนบน iOS เท่านั้นไม่เช่นนั้นด้วยเหตุผลบางประการไม่สามารถทำให้มุมโค้งมนเป็นปกติในแพลตฟอร์มต่างๆให้ใช้-webkit-border-radiusคุณสมบัตินำหน้าแทนซึ่งยังคงรองรับอยู่ แน่นอนว่า Apple สามารถเลือกที่จะปล่อยการสนับสนุนสำหรับคุณสมบัตินำหน้าได้ตลอดเวลา แต่เมื่อพิจารณาถึงคุณลักษณะ CSS เฉพาะแพลตฟอร์มอื่น ๆ ของพวกเขาพวกเขาจะเก็บมันไว้รอบ ๆ

สำหรับรุ่นเก่าที่คุณต้องตั้งค่า-webkit-appearance: noneแทน:

input {
    -webkit-appearance: none;
}

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

1

ตั้งแต่ iOS 5 นี่จะเป็นการลบเงาภายในเท่านั้น ตรวจสอบคำตอบของ Piyush เพื่อลบมุมที่โค้งมนเช่นกัน

— Jonathan Freeland

6

-webkit-appearanceอันที่จริงไม่มีอะไรเกี่ยวข้องกับเงาภายในและมุมโค้งมน อย่าใช้มันเพื่อสิ่งนั้น css-infos.net/property/-webkit-appearance

— Rudie

13

"ถ้า IOS ต้องการมุมโค้งมนและเงาให้ผู้ใช้ IOS มี": นั่นเป็นสิ่งที่ยอมรับไม่ได้ในสถานการณ์ของฉันและอาจเป็นในส่วนอื่น ๆ เช่นกัน

— coredumperror

2

!! คุณไม่ควรใช้วิธีนี้มันทำให้ช่องทำเครื่องหมายดูเหมือนว่าไม่พร้อมใช้งานด้วยเหตุนี้ผู้ใช้เว็บไซต์ของฉันจำนวนมากไม่ได้ดำเนินการตามข้อตกลงการชำระเงิน !!

— synthresin

10

สำหรับ<input type="search">บน iOS 10 -webkit-appearance: none;ฉันยังคงจำเป็น

— Gabriel Smoljár

54

input -webkit-appearance: none; คนเดียวไม่ทำงาน

ลองเพิ่ม-webkit-border-radius:0px;เพิ่มเติม

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

1

ฉันจำเป็นต้องเพิ่ม-webkit-border-radiusคุณสมบัติเพื่อ<input type="text">ลบมุมที่โค้งมนใน iOS 5

— Jonathan Freeland

ไม่จำเป็นต้องเพิ่ม px หลังจากวันที่ 0

— mintedsky

42

มันเป็นวิธีที่ดีที่สุดในการลบการปัดเศษใน IOS

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

หมายเหตุ:โปรดอย่าใช้รหัสนี้สำหรับตัวเลือกที่เลือก มันจะมีปัญหาในการเลือกของเรา

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

2

ฉันพบว่าการใช้input[type]ดูเหมือนว่าจะทำเคล็ดลับสำหรับอินพุตทั้งหมด

— JacobTheDev

11

ปุ่มตัวเลือกคำตอบที่ยอมรับทำให้หายไปบน Chrome งานนี้:

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}

— François Romain
แหล่งที่มา

7

นี่คือโซลูชันที่สมบูรณ์แบบสำหรับ Compass (SCSS):

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}

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

14

เพียงบันทึก@include border-radius(0);mixin จะใช้ได้เฉพาะเมื่อคุณกำหนดด้วยตัวคุณเองหรือใช้กรอบเข็มทิศไม่เพียง แต่วานิลลา SASS

— วาฟเฟิล

เพียงแค่ทราบถ้าคุณกำลังใช้ SCSS คุณควรจะใช้โปรแกรมแก้ไขอัตโนมัติด้วยเช่นกัน

— Christian

6

สำหรับฉันใน iOS 5.1.1 บน iPhone 3GS ฉันต้องล้างสไตล์ของช่องค้นหาและกำหนดให้เป็นสไตล์ที่ต้องการ

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

การทำ-webkit-border-radius: 0;ตามลำพังไม่ได้ทำให้สไตล์ดั้งเดิมชัดเจนขึ้น นี่เป็นมุมมองเว็บในแอปที่ใช้งานจริง

— Chris Bernardi
แหล่งที่มา

4

ฉันมีปัญหาเดียวกัน แต่สำหรับปุ่มส่งเท่านั้น จำเป็นต้องลบเงาภายในและมุมโค้งมน -

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }

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

4

หากคุณใช้ normalize.css สไตล์ชีทนั้นจะทำอะไรที่คล้ายinput[type="search"] { -webkit-appearance: textfield; }กัน

นี้มีความจำเพาะสูงกว่าตัวเลือกชั้นเดียวเช่นเพื่อให้ทราบว่าคุณนั้นไม่สามารถทำอะไรได้.foo .my-field { -webkit-appearance: none; }หากคุณไม่มีวิธีที่ดีกว่าในการบรรลุเป้าหมายที่เฉพาะเจาะจงสิ่งนี้จะช่วย:

.my-field { -webkit-appearance: none !important; }

— Henrik N
แหล่งที่มา

4

โปรดลองอันนี้:

ลองเพิ่มinputCSS เช่นนี้:

 -webkit-appearance: none;
       border-radius: 0;

— Ivin Raj
แหล่งที่มา

3

ฉันใช้รัศมีเส้นขอบอย่างง่าย: 0; เพื่อลบมุมมนสำหรับชนิดอินพุตข้อความ

— เจสซี
แหล่งที่มา

0

ในการแสดงปุ่มอย่างถูกต้องบน Safari และเบราว์เซอร์อื่น ๆ คุณจะต้องระบุสไตล์เฉพาะสำหรับปุ่มเพิ่มเติมจากการตั้งค่าลักษณะที่ปรากฏของ webkit ให้เป็น none เช่น:

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf

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