[分享]css中怎么画搜索框

在网页设计中，搜索框是一个非常重要的元素，它可以提高网站的可用性和用户体验。而为了实现一个漂亮的搜索框，CSS是一个不可忽视的工具。首先，我们需要为搜索框创造一个容器。使用以下代码创建一个搜索框容器：...

在网页设计中，搜索框是一个非常重要的元素，它可以提高网站的可用性和用户体验。而为了实现一个漂亮的搜索框，CSS是一个不可忽视的工具。
首先，我们需要为搜索框创造一个容器。使用以下代码创建一个搜索框容器：

<div class="search">
    <input type="text" placeholder="Search">
    <button type="submit">Go</button>
</div> 

在上述代码中，我们使用了一个div容器和两个子元素：输入框和按钮。注意，我们使用了占位符文本“Search”为输入框添加了一个默认文本，当用户单击搜索框时，文本将被清空。
为了将这个div容器居中，我们需要使用CSS。在样式表中添加以下代码：

.search {
    width: 320px;
    margin: 0 auto;
    text-align: center;
} 

在上述代码中，我们使用了width属性为容器指定了一个宽度，使用margin属性将其居中，并使用text-align属性使子元素在容器中居中。
最后，我们需要为输入框和按钮添加样式：

input[type="text"] {
    width: 250px;
    height: 34px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

button[type="submit"] {
    height: 34px;
    padding: 6px 12px;
    background-color: #428bca;
    border: none;
    color: #fff;
    border-radius: 4px;
} 

在上述代码中，我们为输入框和按钮分别指定了高度、内边距、边框、边框半径等样式。为了保证输入框的宽度和按钮的高度相匹配，我们使用了box-sizing属性，并将其设置为border-box。
综合起来，以上代码构成一个基本的搜索框样式。您可以根据自己的需要定制搜索框的颜色、大小、字体、背景等。