ปุ่มใส่สไตล์สำหรับ iPad และ iPhone


215

ฉันใช้ CSS เพื่อกำหนดลักษณะปุ่มอินพุตบนเว็บไซต์ของฉัน แต่ในอุปกรณ์ IOS การใส่สไตล์จะถูกแทนที่ด้วยปุ่มเริ่มต้นของ Mac มีวิธีการสไตล์ปุ่มสำหรับ iOS หรือวิธีที่จะทำให้การเชื่อมโยงหลายมิติที่มีลักษณะเหมือนปุ่มส่งหรือไม่?

คำตอบ:


524

คุณอาจกำลังมองหา

-webkit-appearance: none;

ยังคงมีความแตกต่างในการกดปุ่ม /: จัดแต่งทรงผมที่ใช้งานใช่มั้ย มันไม่สนใจสไตล์ของคุณและใช้การซ้อนทับสีเทากึ่งโปร่งใส?
Alan H.

6
หากคุณกำลังใช้ SCSS ให้ใช้@include experimental(appearance, none);
Sam Soffes

1
ลิงค์ข้างบนนี้ตายไปแล้วขออภัย ( thinkvitamin.com/design/… )
ต่อ Aronsson ที่ทำภารกิจ

ปัญหาหนึ่งสำหรับเรื่องนี้คือสำหรับ<select>กล่องมันไม่แสดงลูกศรเมื่ออยู่บนเบราว์เซอร์เดสก์ท็อป ดังนั้นนี่คือการจับคู่ที่ดีที่สุดกับแบบสอบถามสื่อฉันคิดว่า
andrewtweber

อะไรนะ ... มันง่ายจริงๆเหรอ? ฉันใช้หลายCSSบรรทัดเพื่อจัดสไตล์และบรรทัดนี้ก็เพียงพอที่จะใช้เคล็ดลับ!


9

ฉันเพิ่งเจอปัญหานี้ด้วยตัวเอง

<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->

หวังว่าจะช่วย


3
ที่ยังไม่อนุญาตให้ฉันเปลี่ยนความสูงของปุ่ม สิ่งที่ตลกแม้ว่าทันทีที่ฉันให้ความกว้างที่กำหนดเองปุ่มความสูงที่กำหนดเองจะถูกนำมาพิจารณาด้วย
ไข้หวัดใหญ่

นี่คือการแก้ไขสำหรับ UIkit v3
Kalob Taulien

4

ใช้ CSS ด้านล่าง

input[type="submit"] {
  font-size: 20px;
  background: pink;
  border: none;
  padding: 10px 20px;
}
.flat-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   border-radius: 0;
}

h2 {
  margin: 25px 0 10px;
  font-size: 20px;
}
<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />

<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />


0

- webkit ลักษณะ: ไม่มี;

หมายเหตุ: ใช้ bootstrap เพื่อจัดสไตล์ปุ่มเป็นเรื่องธรรมดาสำหรับการตอบสนอง


0

ฉันมีปัญหาเดียวกันในวันนี้โดยใช้ Primefaces (Primeng) และเชิงมุม 7 เพิ่มสิ่งต่อไปนี้ลงใน style.css ของคุณ

p-button {
   -webkit-appearance: none !important;
}

ฉันยังใช้ bootstrap เล็กน้อยซึ่งมี reboot.css แทนที่ด้วย (นั่นเป็นเหตุผลว่าทำไมฉันต้องเพิ่ม! สำคัญ)

button {
  -webkit-appearance: button;

}

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.