css搜索框 灰色 |css设置背景图片宽高

html {
font-size: 62.5%;
}
input {
border: none;
background-color: #f2f2f2;
padding: 1rem;
font-size: 1.6rem;
width: 50%;
}
input[type="submit"] {
background-color: #333;
color: #fff;
border-radius: 0.5rem;
padding: 1rem 2rem;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #666;
}

首先，大家需要设置HTML的字体大小为62.5%（1rem = 10px），这样可以方便大家按照px等单位计算。接着，大家对input元素进行了样式的设置，去掉边框，设置背景颜色为#f2f2f2，内边距为1rem，字体大小为1.6rem，宽度为50%。

然后，大家对input[type=”submit”]也就是“搜索”按钮进行了样式的设置，设置背景颜色为#333，字体颜色为白色，设置圆角为0.5rem，设置内边距为1rem 2rem，设置鼠标指针为手型。当鼠标悬停在按钮上方时，背景颜色会改为#666，即达到了hover状态下的样式效果。

这样，大家就实现了一个简单的灰色CSS搜索框。