CSS safari com input submit arredondado

[rodrigo labruciano]

Olá pessoal e obrigado desde já... Estou com este problema da imagem abaixo.

 

O INPUT TYPE="SUBMIT" , Está com as bordas arredondadas no navegador Safari no iPhone.

nos outros navegadores esta normal. Como resolver?

<div id="formulario">

<input type="text" name="user" id="user" maxlength="16" minlength="8" placeholder="usuario"><br>

<input type="password" name="passplaca" id="baseplaca" maxlength="4" minlength="4" placeholder="senha"><br>



<input type="submit" name="inputbtn" id="inputbtn" value="acessar">



</div>

No css não coloquei codigo para as bordas arredondadas

 

[DiF]

@rodrigo labruciano Olá, seja bem vindo em nosso Clube do Hardware.

 

Basta adicionar a regra para o input:

input {
    border-radius: 0;
}

Se tiver uma class fica melhor, assim você colocar a regra somente no elemento do botão submit.

 

Caso não funcione em versões  mais antigas, adicione -webkit-appearance: none; também.

[groutmoustache]

@DiF @rodrigo labruciano

Em 28/01/2018 às 19:29, DiF disse:

@rodrigo labruciano Olá, seja bem vindo em nosso Clube do Hardware.

 

Basta adicionar a regra para o input:

input {
    border-radius: 0;
}

Se tiver uma class fica melhor, assim você colocar a regra somente no elemento do botão submit.

 

Caso não funcione em versões  mais antigas, adicione -webkit-appearance: none; também.

 

Acrescentando a resposta, gostaria de lembrar que os diferentes navegadores da web possuem alguns diferentes estilos padrões, para determinados componentes.  Assim, da mesma forma que o Safari apresentou input arredondado, o Opera, Chrome ou IE poderiam apresentar em outro estilo.

 

Por isso, é importante que você aprenda sobre CSS resets para, pelo menos, entender como evitar esses "bugs".

 

Links úteis:

Vídeos