如何制作一个在 css 中没有圆角的搜索栏,该搜索栏可以在谷歌浏览器上使用



我正在设计一个网站,我希望搜索栏没有圆角 - 只有典型的直角。无论出于何种原因,我都无法让它在谷歌浏览器中工作,但是当我在火狐中打开我的网站时,它确实有直角。有谁知道我需要做什么才能搜索栏显示在没有圆角的 chrome 中?

这是我的 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;
}

试着把它放在你的css中。这会将搜索的默认显示更改为与具有直角的文本字段相同。http://jsfiddle.net/8PdDt/

input[type=search] {
    -webkit-appearance: textfield;
}​​​

最新更新