css制作酷狗搜索框

在这篇文章里，我们来学习一下如何使用CSS来制作酷狗搜索框。

首先，我们需要建立一个HTML表单来放置搜索框。代码如下：

form action="search.php">
    /form>
    

接着，在表单中添加一个文本输入框和一个提交按钮：

form action="search.php">
    input type="text" name="keyword">
    input type="submit" value="搜索">
    /form>

现在，我们需要使用CSS来为这个表单添加样式。首先，为表单设置一些基本属性：

form {
    width: 400px;
    margin: 0 auto;
    text-align: center;
}

这将使表单居中显示，并设置宽度为400像素。接下来，我们需要为文本输入框和提交按钮添加一些样式：

input[type="text"] {
    width: 300px;
    padding: 10px;
    border: none;
    border-radius: 20px;
    outline: none;
    font-size: 16px;
}
input[type="submit"] {
    width: 80px;
    height: 40px;
    margin-left: -4px;
    background-color: #31C27C;
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
}

这将为输入框添加圆角边框、内边距和字体大小，并去掉默认的边框。提交按钮将增加背景颜色、圆角边框和样式。

最后，我们需要为输入框添加hover效果，以便在鼠标悬停时改变样式：

input[type="text"]:hover {
    background-color: #F0F0F0;
}
    

这将改变输入框的背景颜色为灰色，并在悬停时出现。

现在我们已经完成了酷狗搜索框的制作，代码如下：

form action="search.php">
    input type="text" name="keyword">
    input type="submit" value="搜索">
    /form>
    style>
form {
    width: 400px;
    margin: 0 auto;
    text-align: center;
}
input[type="text"] {
    width: 300px;
    padding: 10px;
    border: none;
    border-radius: 20px;
    outline: none;
    font-size: 16px;
}
input[type="submit"] {
    width: 80px;
    height: 40px;
    margin-left: -4px;
    background-color: #31C27C;
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
}
input[type="text"]:hover {
    background-color: #F0F0F0;
}
    /style>
    

希望这篇文章能够帮助你学习如何使用CSS制作搜索框。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！