我正在尝试在标题中添加搜索字段：
<form class="searchform">
<span><input type="text" class="search rounded" p
laceholder="Search..."></span>
</form>
e.searchform{
width:1000px;
margin:0 auto;
height: 50px;
}
.search {
padding:6px 15px 6px 30px;
margin:3px;
background: url(\'./images/search.png\') no-repeat 8px 6px;
}
.rounded {
border-radius:55px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
input[type=text]{
color:#bcbcbc;
}
.lighter, .light, .dark {
width:95%;
height:50px;
padding:40px 25px;
}
.lighter{
background: url(\'./images/lighter_grey.jpg\');
}
.lighter input[type=text]{
border:1px solid #d0d0d0;
background-color:#fcfcfc;
}
.light{
background: url(\'./images/light_grey.jpg\');
}
.light input[type=text]{
border:1px solid #acb1b7;
background-color:#fcfcfc;
}
input[type=button], input[type=button]:hover {
position:relative;
left:-6px;
border:1px solid #adc5cf;
background: #e4f1f9; /* Old browsers */
background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%); /* FF3.6+
*/
background: -webkit-gradient(linear, left top, left bottom, color-
stop(0%,#e4f1f9), color-stop(100%,#d5e7f3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* IE10+ */
background: linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#e4f1f9\', endColorstr=\'#d5e7f3\',GradientType=0 ); /* IE6-9 */
color:#7da2aa;
cursor: pointer;
}
出于某种原因，css样式对表单的影响不大。例如，表单没有获得所需的宽度。可能有什么问题。
最合适的回答,由SO网友:Kieran McClung 整理而成
您的标记在技术上是正确的，除了第一行css. 您需要删除e 在.searchform 声明接受这些样式。
下面的代码工作正常（请参阅此处的演示：https://codepen.io/raptorkraine/pen/eyJrJG) 然而，如果您的输入仍然没有显示圆角边框，则可能是您的样式被另一个样式表覆盖了。
您可以通过在冲突的样式表之后声明样式表、添加更具体的声明或添加!important （不推荐）。
HTML
<form class="searchform">
<span>
<input type="text" class="search rounded" placeholder="Search...">
</span>
</form>
CSS
/* Removed the \'e\' from this line */
.searchform {
width: 1000px;
margin: 0 auto;
height: 50px;
}
.rounded {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 55px;
}
/* More specific styles (if the above doesn\'t work) */
form.searchform {
width: 1000px;
margin: 0 auto;
height: 50px;
}
form.searchform input.rounded {
border-radius: 15px;
}
/* Demo styles to better view border radius */
.searchform {
background-color: #ccc;
}
.rounded {
border: 1px solid #000;
}
还值得注意的是
border-radius 不需要，并且值与基本样式不同。如果你坚持使用它们，那么值得将它们全部改为
15px 或
55px.
Additional
如果你想使用
.light,
.lighter &；
.dark 类我还要更改以下代码：
HTML
<input type="text" class="search rounded light" placeholder="Search...">
CSS
/* Replaces: .lighter input[type=text] */
input.lighter {
border: 1px solid #d0d0d0;
background-color: #fcfcfc;
}
/* Replaces: .light input[type=text] */
input.light {
border: 1px solid #acb1b7;
background-color: #fcfcfc;
}
