Geek Answers Handbook

Why doesn't border radius work correctly on text inputs in MobileSafari?

Here is the HTML reference document:

<!DOCTYPE html>
<html>
    <head>
    <style>
body { background-color: #000; }
input { -webkit-border-radius: 20px; }
    </style>
    </head>
    <body>
        <input type="text" value="text" />
    </body>
</html>

border-radius displays Safari / WebKit-based browsers perfectly, but in the MobileSafari option, namely the iPhone and iPad browsers, it displays this strange box that destroys the illusion of rounded corners when the input is displayed on top of a different color.

http://cl.ly/1LUi/content

+5
source share
5 answers

Consensus across the network is that this is a bug in WebKit for iOS. Do not use border-radiuson text inputon the iPhone.

+2
source

I managed to fix this by reducing the radius of the border.

, .

, -webkit-border-radius: 20px; , 40 .

, .

+15

span/div/other ?

<style>
    body { background-color: #000; }
    .inputWrapper { -webkit-border-radius: 20px; }
</style>

...

<body>
    <div class="inputWrapper"><input type="text" value="text" /></div>
</body>
+1

, -webkit-border-radius 8px , . :

-webkit-box-shadow: 0px 5px 10px rgba (0,0,0,0,5);

, , , . , -webkit-box-shadow ? , .

:

-webkit- -webkit-- - -webkit-- - -webkit-

-webkit-border-radius , ( , ). , .

0

what about input input {-webkit-border-radius: 20px; outline: 0; } see the result .. :)

0
source

More articles:


All Articles