CODEWITHSUNDEEP
htmlcssmobile-safari
DanV
DanV

Reputation: 3240

Adjust border-radius on input type search not working on mobile safari

Here's my html:

    <form action="/" method="get" class="searchForm">
        <input type="search" placeholder="Search...">
        <input type="submit" value="">
    </form>

and my css: 

    input[type="search"]{
        height: 31px;
        width: 254px;
        border: 1px solid #ccc;
        border-right: none;
        padding: 0 5px;
        float: left;
        border-radius: 5px 0 0 5px;
    }

It works fine in all browsers except mobile safari where it gives each corner an equal radius. If I change the input type to text it works, but for search and submit it doesn't.

I've tried adding:

    input {
        -webkit-appearance: none;
        border-radius: 0 !important;
    }

Any ideas? Thanks in advance!

Upvotes: 3

Views: 3135

Answers (1)

Yogesh Khatri
Yogesh Khatri

Reputation: 1210

You can try

  1. using -webkit prefix for border radius.
  2. long hand version of using border radius (see this :- http://blog.lesjames.com/post/8510513712/mobile-safari-and-border-radius)

if this doesn't work try to provide more details like ios version, ipad/iphone. i tested on iphone with ios 5.1 and 4.3, worked perfect for me if using -webkit-appearance:none;

Upvotes: 1

Related Questions