entrée (html5) change de forme en cercle sur iphone

Je l'ai fait d'entrée simple et bouton envoyer, mais le problème est, avec mon safari iphone/chrome, cette entrée change de forme à cercle, et l'ID texte modifie sa position et descend ... pourquoi cela se produit, quand je vais à chrome de bureau (PC) là, vous pouvez cliquer droit et aller inspecter et vérifier votre site avec différents appareils et il montre que tout devrait être ok sur iphone, mais quand je vais iPhone ce ne est pas ...entrée (html5) change de forme en cercle sur iphone

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 

 
<style> 
 
#title{ 
 
    font-size:100px; 
 
} 
 
input{ 
 
position:absolute; 
 
    top: 200px; 
 
height:150px; 
 
width:340px; 
 
size:35px; 
 
background-color: ; 
 
font-size:60px; 
 

 

 
} 
 
button{ 
 
font-size:60px; 
 
position:absolute; 
 
    left: 350px; 
 
    top: 200px; 
 
    margin: 0px; 
 
height:150px; 
 
width:150px; 
 
background-color: #EEE; 
 
padding: 0px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div id="title"> 
 
<p>Packet ID </p> 
 
</div> 
 

 
<input type="search" > 
 
<button type="button">Send</button> 
 
    
 
</body> 
 
</html>

Source

2017-10-12 Joonas Karppinen

@tobiv ne vous le savez, pourquoi le texte « ID », de " ID de paquet "sur iphone safari descend? –

Je ne sais pas - peut-être parce que ça ne correspond pas à l'écran? – tobiv

@tobiv mais pourquoi quand j'écris PacketID cela fonctionne et pas comme ça Packet ID –

Ajouter dans votre css:

button { 
    -webkit-appearance: none; 
    -webkit-border-radius: 0; 
border-radius: 0; 

}

Source

2017-10-12 12:38:51 Balwant

hey, cela fonctionne, mais pouvez-vous me donner raison, ce pourquoi il n'a pas fonctionné et pourquoi cela résout cela? –

S'il vous plaît voir ce fil https://stackoverflow.com/questions/2918707/turn-off-iphone-safari-input-element-rounding – Balwant

connaissez-vous, pourquoi le texte « ID », de « ID paquet » sur safari iphone descend ? –

C'est par la conception. Chaque navigateur a son ensemble de feuilles de style "par défaut", qu'il utilise sur input s et tous les autres éléments HTML.

Sauf si vous fournissez un style manuel pour chaque attribut de l'élément, la feuille de style par défaut est appliqué.

Il y a plusieurs façons de traiter cette question. La première est de fournir un style manuel comme ceci:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" /> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 

 
<style> 
 
#title{ 
 
    font-size:100px; 
 
} 
 
input{ 
 
position:absolute; 
 
    top: 200px; 
 
height:150px; 
 
width:340px; 
 
size:35px; 
 
background-color: ; 
 
font-size:60px; 
 
border-radius: 0px; //Try adding this 
 
    
 
} 
 
button{ 
 
font-size:60px; 
 
position:absolute; 
 
    left: 350px; 
 
    top: 200px; 
 
    margin: 0px; 
 
height:150px; 
 
width:150px; 
 
background-color: #EEE; 
 
padding: 0px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div id="title"> 
 
<p>Packet ID </p> 
 
</div> 
 

 
<input type="search" > 
 
<button type="button">Send</button> 
 
    
 
</body> 
 
</html>

Une autre façon d'éviter cela est de Normalize ou Reset CSS.

Ces bibliothèques considèrent les changements croisés navigateur comme celles-ci et normalisent le style à travers le conseil d'administration. Réinitialiser CSS et Normaliser CSS sont la solution standard pour traverser les problèmes de style de navigateur, actuellement sur le marché

Source

2017-10-12 12:32:01 nikjohn

ok, cela ne fonctionne pas non plus –

Mis à jour la réponse avec quelques autres suggestions – nikjohn

ResetCSS et NormalizeCSS sont la solution standard pour traverser les problèmes de style navigateur, actuellement sur le marché – nikjohn

entrée (html5) change de forme en cercle sur iphone

Répondre

Questions connexes