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?

— mheavers
fonte

524

Você pode estar procurando

-webkit-appearance: none;

Notas CSS do Safari em -webkit-appearance
Rede de Desenvolvedores Mozilla -moz-appearance

— 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