Botões de entrada de estilo para iPad e iPhone

214

Estou usando CSS para estilizar os botões de entrada no meu site, mas nos dispositivos IOS o estilo é substituído pelos botões padrão do Mac. Existe uma maneira de estilizar botões para iOS ou talvez criar um hiperlink que se comporte como um botão de envio?

iphone css ios ipad mheavers
fonte

Respostas:

524

Você pode estar procurando 

-webkit-appearance: none;
Jonas G. Drange
fonte
Ainda há uma diferença no botão pressionar /: estilo ativo, certo? Ele ignora seus estilos e aplica uma sobreposição cinza semitransparente?
Alan H.
6
Se você estiver usando SCSS, uso@include experimental(appearance, none);
Sam Soffes
1
O link acima agora está morto, infelizmente ( thinkvitamin.com/design/… ).
Por Quested Aronsson
Um problema é que, para <select>caixas, ele não exibe a seta quando em um navegador de área de trabalho. Portanto, isso é melhor emparelhado com uma consulta de mídia, eu acho.
andrewtweber
O que ... Foi realmente simples assim? Eu usei muitas CSSlinhas para estilizá-la e essa linha foi suficiente para fazer o truque ?!
19

Por favor, adicione este código css

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
subindas pm
fonte
9

Recentemente me deparei com esse problema.

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

Espero que ajude.

Digital Robot Gorilla
fonte
3
Isso ainda não me permite alterar a altura de um botão. O engraçado é que, assim que eu atribuo ao botão uma largura personalizada, a altura personalizada também é levada em consideração.
gripe
Essa foi a correção para o UIkit v3.
Kalob Taulien
4

Use o css abaixo

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

vinod
fonte
0

-webkit-aparecimento: nenhum;

Nota: use o bootstrap para estilizar um botão. É comum o responsivo.

Karthiha Karthi
fonte
0

Hoje tive o mesmo problema usando primefaces (primeng) e angular 7. Adicione o seguinte ao seu style.css

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

Eu também estou usando um pouco de bootstrap que tem um reboot.css, que o substitui (é por isso que eu tive que adicionar! importante)

button {
  -webkit-appearance: button;

}

djnose
fonte