How can I make a search bar that does not have rounded corners in css that will work on google chrome?

StackOverflow https://stackoverflow.com/questions/12737367

  •  05-07-2021
  •  | 
  •  

Frage

I am designing a website and I would like the search bar to not have rounded corners-just the typical straight corners. For whatever reason I cannot make it work in google chrome, but when I pull up my website in firefox it does have straight corners. Does anyone know what I need to do so the search bar will show up in chrome without rounded corners?

Here is my css:

#searchbar {
float:right;
padding:10px 20px;
clear:right;
margin-right:35px;
margin-top:-7px;
}

#searchbar input {
float:right;
border:1px solid #000;
border-radius:none;
}

#searchbar p {
margin:5px 10px 0 0;
float:right;
text-transform:capitalize;
font-variant:small-caps;
font-size:1em;
}
War es hilfreich?

Lösung

Try putting this in your css. This will change the default showing of a search to be the same as text-field which has straight corners. http://jsfiddle.net/8PdDt/

input[type=search] {
    -webkit-appearance: textfield;
}​​​
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top