CODEWITHSUNDEEP
htmlcsssafari
Talha Aslam
Talha Aslam

Reputation: 101

Safari Search field issue

Search field is working perfectly on all browser's except safari, Safari is not picking the padding + height of search field which is causing the issue.

Please have a view to link:

techzeast.com/projects/html-current

Thanks indeed for your help.

Upvotes: 1

Views: 1262

Answers (3)

Vishakha Nehe
Vishakha Nehe

Reputation: 37

Please try to add line-height : 

.search {
        width: 94%;
        float: left;
        border-top-left-radius: 5px;
        padding: 10px 10px;
        height: 54px;
        margin-top: 33px;
        font-size: 18px;
        border-bottom-left-radius: 5px;
        line-height: 30px; // need to add
    }

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11506

Just add -webkit-appearance: none to .search {}

For overriding issues use input[type="search"].search {} and also override box-sizing: border-box; to box-sizing: padding-box;

— Default User Agent Stylesheet for iOS

input[type="search"] {
    -webkit-appearance: searchfield; /* need to be changed */
    box-sizing: border-box;
}

Upvotes: 3

Alessandro
Alessandro

Reputation: 341

I'm not on a Mac right now but I think it's because of the rendering of "search" input type you set.

Try to change the type of your input to "text" instead of search.

Upvotes: 0

Related Questions