CSS HTML | Search input has round corners in safari

css, html

Solution

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'>

Problem

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.

Original source