Stylowe przyciski wprowadzania dla iPada i iPhone'a

215

Używam CSS do stylowania przycisków wprowadzania na mojej stronie, ale na urządzeniach z iOS IOS stylizację zastępują domyślne przyciski komputera Mac. Czy istnieje sposób stylizowania przycisków na iOS lub sposób utworzenia hiperłącza, który zachowuje się jak przycisk przesyłania?

iphone css ios ipad wahacze
źródło

Odpowiedzi:

524

Być może szukasz 

-webkit-appearance: none;
Jonas G. Drange
źródło
Wciąż jest różnica w wciskaniu przycisków /: aktywny styl, prawda? Ignoruje twoje style i stosuje półprzezroczystą szarą nakładkę?
Alan H.
6
Jeśli używasz SCSS, użyj@include experimental(appearance, none);
Sam Soffes,
1
Powyższy link jest teraz niestety martwy ( thinkvitamin.com/design/… ).
Per Quested Aronsson
Jednym z problemów jest to, że w przypadku <select>pudełek nie wyświetla strzałki w przeglądarce na pulpicie. Myślę, że najlepiej jest to połączyć z zapytaniem medialnym.
andrewtweber
Co ... Czy to naprawdę było takie proste? Użyłem wielu CSSlinii do stylizacji i ta linia wystarczyła, aby załatwić sprawę ?!
19

Dodaj ten kod css

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
subindas pm
źródło
9

Ostatnio sam zetknąłem się z tym problemem.

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

Mam nadzieję, że to pomaga.

Digital Robot Gorilla
źródło
3
To wciąż nie pozwala mi zmienić wysokości przycisku. Zabawne jest to, że gdy tylko nadam guzikowi niestandardową szerokość, bierze się również pod uwagę niestandardową wysokość.
grypa
To była poprawka dla UIkit v3.
Kalob Taulien
4

Użyj poniższego 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!" />
Rozwiń fragment kodu

vinod
źródło
0

-webkit-wygląd: brak;

Uwaga: użyj stylu bootstrap, aby stylizować przycisk.

Karthiha Karthi
źródło
0

Ten sam problem miałem dzisiaj przy użyciu primefaces (primeng) i kątowej 7. Dodaj następujące elementy do swojego style.css

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

używam również trochę bootstrap, który ma reboot.css, który zastępuje go (dlatego musiałem dodać! ważne)

button {
  -webkit-appearance: button;

}

djnose
źródło