İPhone / Safari giriş yuvarlaqlaşdırmasını söndür

Sitem bir istisna olmaqla, iPhone / Safari brauzerinə yaxşı əks olunur: mətn daxil sahələri veb-saytımın qalan hissəsi ilə yaxşı görünməyən qəribə bir yuvarlaq stil var.

Giriş sahələrini dəyişdirmək və nəzərdə tutulduğu kimi düzbucaqlı etmək üçün Safari (CSS və ya metadata vasitəsilə) təlimatlandırmaq üçün bir yol varmı?

310
27 мая '10 в 8:38 2010-05-27 08:38 Alex 27 may 10-da saat 08:38 da təyin olunub
@ 11 cavab

İOS 5 və daha sonra, border-radius yaxşı olma yolu belədir:

 input { -webkit-appearance: none; } 
555
27 мая '10 в 8:39 2010-05-27 08:39 cavab BoltClock tərəfindən 27 may 10: 00-da saat 08 : 39-da verilir

input -webkit-appearance: none; işləmir.

border=0

Əlavə edin -webkit-border-radius:0px; .

42
22 янв. Jan. 22 verildi 2011-01-22 13:50 '11 at 13:50 2011-01-22 13:50

Bu, IOS-da yuvarlaqlaşdırılanların aradan qaldırılması üçün ən yaxşı yoldur.

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

Qeyd: Seçdiyiniz seçim üçün bu kodu istifadə etməyin. Bizim problemimiz bir problem olacaq.

31
21 янв. KoemsieLy Jan 21 cavab verdi 2014-01-21 05:32 '14 da 5:32 2014-01-21 05:32

Qəbul edilən cavab Chrome-da keçid açacaq. İşləyir:

 input:not([type="radio"]):not([type="checkbox"]) { -webkit-appearance: none; border-radius: 0; } 
8
16 марта '16 в 20:52 2016-03-16 20:52 Cavab francoisromain 16 mart 16: 20-də verilir ' 160 2016-03-16 20:52

Kompas üçün tam həll (SCSS):

 input { -webkit-appearance: none; // remove shadow in iOS @include border-radius(0); // remove border-radius in iOS } 
7
08 нояб. Johansrk cavab 08 Nov. 2012-11-08 13:54 '12 at 13:54 2012-11-08 13:54

Mənim üçün iPhone 3GS-də iOS 5.1.1-də mənim üçün axtarış sahəsində tərzini təmizləmək və

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

İcra: -webkit-border-radius: 0; öz üslubunu təmizləməmişdi. Doğma proqramda veb taramada da istifadə edilmişdir.

4
23 авг. Chris Bernardi tərəfindən verilmiş cavab Aug 23 2012-08-23 19:59 '12 at 7:59 pm 2012-08-23 19:59

Mənim də eyni problemim var idi, ancaq təqdimat düyməsinə görə. Daxili kölgə və yuvarlaq küncləri silmək lazımdır -

 input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; } 
4
05 сент. Cavab verilir seanjacob 05 Sentyabr . 2012-09-05 19:55 '12 saat 7:55 pm 2012-09-05 19:55

input[type="search"] { -webkit-appearance: textfield; } istifadə edirsinizsə, bu stil hesabatı input[type="search"] { -webkit-appearance: textfield; } kimi input[type="search"] { -webkit-appearance: textfield; } input[type="search"] { -webkit-appearance: textfield; } .

Bu, bir .foo kimi bir sinif selektorundan daha yüksək bir spesifikliyə malikdir, belə ki, yalnız bunu edə bilməyinizi unutmayın .my-field { -webkit-appearance: none; } .my-field { -webkit-appearance: none; } . Doğru xüsusiyyətlərə nail olmaq üçün daha yaxşı bir yolunuz yoxdursa, bu kömək edəcək:

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

3
09 февр. Cavab Henrik N 09 fevralda verilir. 2015-02-09 14:04 '15 at 14:04 2015-02-09 14:04

Sadə bir sərhəd radiusunu istifadə etdim: 0; mətn daxil növləri üçün yuvarlaq küncləri silmək.

3
12 окт. Cavab 12 oktyabrda Jesse tərəfindən verilir . 2012-10-12 04:15 '12 saat 04:15 'da 2012-10-12 04:15

Safari və digər brauzerlərdə düzgün düymələri göstərmək üçün, veb-sitatın görünüşünü heç birinə qoymamaqla yanaşı, düymələr üçün xüsusi bir stil göstərməlisiniz, məsələn:

 border-radius: 0; -webkit-appearance: none; background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7); border: 1px solid #afafaf 
0
15 авг. cavab CpnCrunch 15 aug verilir . 2017-08-15 23:51 '17 də 11:51 'də 2017-08-15 23:51

Aşağıdakıları sınayın:

input Css-i aşağıdakı kimi əlavə edin:

  -webkit-appearance: none; border-radius: 0; 
0
18 сент. Ivin Raj tərəfindən verilmiş cavab Sep 18 2015-09-18 08:40 '15 'də saat 08:40' da

Tags ilə bağlı digər suallar və ya bir sual