[分享]css做搜索框怎么做

CSS做搜索框可以很轻松，只需要几步简单的代码就能实现。

/*HTML部分*/
<form action="" method="get">
    <input type="text" name="search" placeholder="搜索..." />
    <button type="submit">搜索</button>
</form>

/*CSS部分*/
input[type="text"] {
    padding: 10px;
    border-radius: 5px;
    border: none;
    outline: none;
    font-size: 16px;
    width: 200px;
}

button[type="submit"] {
    padding: 10px 20px;
    background-color: #007bff;
    border-radius: 5px;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

button[type="submit"]:hover {
    background-color: #0062cc;
} 

首先，在HTML中创建form表单，以便将搜索框和提交按钮组合在一起。

然后，在CSS中设置input[type="text"]的样式，包括背景色、字体大小、圆角边框和边框粗细等。

最后，设置button[type="submit"]的样式，包括背景色、字体颜色、字体大小和过渡效果。

这些简单的代码就能为你的搜索框增加一些必要的样式。