Tạo kiểu nút nhập cho iPad và iPhone

214

Tôi đang sử dụng CSS để định kiểu các nút đầu vào trên trang web của mình, nhưng trên các thiết bị iOS, kiểu dáng được thay thế bằng các nút mặc định của Mac. Có cách nào để tạo kiểu cho các nút cho iOS hoặc cách để tạo một siêu liên kết hoạt động giống như nút gửi không?

— máy nghiền
nguồn

524

Bạn có thể đang tìm kiếm

-webkit-appearance: none;

Safari CSS ghi chú trên -webkit-appearance
Mạng của nhà phát triển Mozilla -moz-appearance

— Jonas G. Drange
nguồn

Vẫn có một sự khác biệt trong nút ấn /: kiểu dáng hoạt động, phải không? Nó bỏ qua các phong cách của bạn và áp dụng một lớp phủ màu xám bán trong suốt?

— Alan H.

6

Nếu bạn đang sử dụng SCSS, hãy sử dụng@include experimental(appearance, none);

— Sam Soffes

1

Thật không may, liên kết ở trên đã chết, thật không may ( thinkv Vitamin.com/design/, ).

— Per Quested Aronsson

Một vấn đề với điều này là đối với <select>các hộp, nó không hiển thị mũi tên khi trên trình duyệt Máy tính để bàn. Vì vậy, đây là kết hợp tốt nhất với một truy vấn phương tiện tôi nghĩ.

— andrewtweber

Cái gì ... nó thực sự đơn giản vậy sao? Tôi đã sử dụng rất nhiều CSSdòng để tạo kiểu cho nó và dòng này là đủ để thực hiện các mẹo?!

19

Vui lòng thêm mã css này

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

— chiều tối
nguồn

9

Gần đây tôi đã gặp vấn đề này bản thân mình.

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

Mong rằng sẽ giúp.

— Robot kỹ thuật số Gorilla
nguồn

3

Điều đó vẫn không cho phép tôi thay đổi chiều cao của một nút. Mặc dù vậy, điều thú vị là ngay khi tôi cho nút có chiều rộng tùy chỉnh thì chiều cao tùy chỉnh cũng được tính đến.

— cúm

Đây là bản sửa lỗi cho UIkit v3.

— Kalob Taulien

4

Sử dụng css dưới đây

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!" />

Mở rộng đoạn trích

— vinod
nguồn

0

-webkit-ngoại hình: không có;

Lưu ý: sử dụng bootstrap để tạo kiểu cho nút. Nó phổ biến cho phản hồi.

— Karthiha Karthi
nguồn

0

Hôm nay tôi có cùng một vấn đề khi sử dụng primefaces (Primeng) và angular 7. Thêm phần sau vào style.css của bạn

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

tôi cũng đang sử dụng một chút bootstrap có khởi động lại .css, ghi đè lên nó (đó là lý do tại sao tôi phải thêm! quan trọng)

button {
  -webkit-appearance: button;

}

— djnose
nguồn