CODEWITHSUNDEEP
htmlcss
J Doe
J Doe

Reputation: 415

CSS HTML | Search input has round corners in safari

I have researched the question, and from what I gathered, you can use -webkit-appearance: none; to do the trick. It removes the rounded corners off of the input, but the problem is that I can't set the border-radius after doing that. I want the search to have a 10px border radius.

Upvotes: 4

Views: 1388

Answers (1)

zer00ne
zer00ne

Reputation: 43910

Make sure that the appearance property is first and place the other properties after it. Try this:

body {
  background: black;
  color: white;
}
input[type="search"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 0px none transparent;
  border-radius: 10px;
  line-height: 20px;
  background: #efdefc;
  color: #930;
  padding: 3px 5px;
}
<input type='search'>

Upvotes: 6

Related Questions