CODEWITHSUNDEEP
htmlcss
Ian Davis
Ian Davis

Reputation: 19423

Rounded corners not showing on type="search" inputs

Rounded corners are snipped off when I have an input with type="search". When I use type="text", they look great.

#q { padding: 8px; outline: none; width: 282px; border: 1px solid #ccc; border-radius: 5px; }

<input type="search" id="q" placeholder="search..." />

Live here: http://jsbin.com/ilipiw/4/edit

Screenshot:

I'm using the latest version of Chrome.

Upvotes: 0

Views: 697

Answers (3)

hradecek
hradecek

Reputation: 2513

Try this:

#q { -webkit-appearance: none; -webkit-border-radius: 5px; outline: none; border: 1px solid #999; padding: 10px; }

Upvotes: 1

Sam Tyson
Sam Tyson

Reputation: 4626

Use this style for #q:

#q { 
    border-radius: 5px; outline: none; border: 1px solid #999; padding: 10px; 
    -webkit-appearance: none; -webkit-border-radius:5px;
}

This jsBin version works in Chrome 18.0.1025.162.

Upvotes: 1

Arpit Srivastava
Arpit Srivastava

Reputation: 2235

Though it should work.

                 #q{-webkit-border-radius:5px;}

If this not work then update your chrome.

Upvotes: -1

Related Questions