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?

— wahacze
źródło

524

Być może szukasz

-webkit-appearance: none;

Safari CSS zauważa na temat -webkit-appearance
Mozilla Developer Network's -moz-appearance

— 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