如何在 google chrome 上制作一个在 css 中没有圆角的搜索栏？答案

【问题标题】：How can I make a search bar that does not have rounded corners in css that will work on google chrome?如何在 google chrome 上制作一个在 css 中没有圆角的搜索栏？
【发布时间】：2012-10-05 08:49:44
【问题描述】：

我正在设计一个网站，我希望搜索栏没有圆角——只有典型的直角。无论出于何种原因，我都无法使其在 google chrome 中运行，但是当我在 Firefox 中打开我的网站时，它确实有直角。有谁知道我需要做什么才能使搜索栏以没有圆角的 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;
}

【问题讨论】：

建议您修改一下并发布链接。 jsfiddle.net
您必须在其中有一个覆盖的 css 规则，因为这将创建一个带有方形边缘的输入。你能把剩下的css贴出来吗jsfiddle.net/LjDq8
阅读这篇关于styling html5 search inputs的文章，你应该在里面找到足够的信息，祝你好运

标签： css searchbar

【解决方案1】：

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

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

【讨论】：

没问题，很高兴我能帮上忙：P