1

After searching and trying everything, I can't get rid of the iOS style on my form.

Here is what I have on PC / Android

And on Iphone 11 ( iOs 14.x )

HTML Code:

<form method="post" >
        <fieldset style= "border-width: 0px;" >             

        
    <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pone" id="pone" autocomplete="off">&nbsp;
            <input style="font-size : 30px; height:48px; width:50px;" type="text" name="ptwo" id="ptwo" autocomplete="off">&nbsp;
                    <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pthree" id="pthree" autocomplete="off">&nbsp;
                            <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pfour" id="pfour" autocomplete="off">&nbsp;
                                    <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pfive" id="pfive" autocomplete="off">&nbsp;
            
            
            
            <label>
                <INPUT style="width:250px; height:50px; font-size : 30px" class="submit" type="submit" name="envoyer" id="envoyer" value="&nbsp; &nbsp; SE LIBERER &nbsp; &nbsp; ">
            </label><br /><br />
        </fieldset>

And my CSS:

input {
border-radius: 0;
}

input[type=text], input[type=button], input[type=submit] {
-webkit-appearance: none;
-webkit-border-radius: 0;
}

I tried also only input{ and input[type]{ Any tips here to have the same result than Android ?

Thank you!

thepopol777
  • 43
  • 1
  • 6
  • 1
    https://stackoverflow.com/questions/22874336/how-to-remove-iphone-button-styling https://stackoverflow.com/questions/5449412/styling-input-buttons-for-ipad-and-iphone – react_or_angluar Nov 20 '20 at 01:20
  • @quantumPuter Thank you for you very constructive answer. Could you please point out which part should I use that I not already tried in my CSS? Cheers – thepopol777 Nov 20 '20 at 14:05

1 Answers1

5

input {
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

}
input[type=text], input[type=button], input[type=submit] {   
    background-color : #D3D3D3;    
}
<form method="post" >
   <fieldset style= "border-width: 0px;" >             
      </label>
      <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pone" id="pone" autocomplete="off">&nbsp;
      <input style="font-size : 30px; height:48px; width:50px;" type="text" name="ptwo" id="ptwo" autocomplete="off">&nbsp;
      <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pthree" id="pthree" autocomplete="off">&nbsp;
      <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pfour" id="pfour" autocomplete="off">&nbsp;
      <input style="font-size : 30px; height:48px; width:50px;" type="text" name="pfive" id="pfive" autocomplete="off">&nbsp;
      </label>        
      <label>
      <INPUT style="width:250px; height:50px; font-size : 30px" class="submit" type="submit" name="envoyer" id="envoyer" value="&nbsp; &nbsp; SE LIBERER &nbsp; &nbsp; ">
      </label><br /><br />
   </fieldset>
</form>
react_or_angluar
  • 1,568
  • 2
  • 13
  • 20
  • Thank you! I just tried and here is the result: https://i.ibb.co/hHxKDnq/barcode.png The code seems to do something! No more rounded edges and good position, but the button is empty? – thepopol777 Nov 20 '20 at 18:36
  • What do you mean that the button is empty? You can't see the text "SE LIBERER"? – react_or_angluar Nov 20 '20 at 21:41
  • Yes! The page background is black, and the button should be grey like this, right ?( android screenshot )https://i.stack.imgur.com/qJd7O.jpg that's why I think the button is kind of... transparent? – thepopol777 Nov 20 '20 at 22:02
  • Take a look now. Please edit your question to make it more clear exactly how you want your button to look. Use words instead of pictures. Also, provide the HTML code that makes the page black. – react_or_angluar Nov 20 '20 at 22:44