html 5搜索栏样式代码

下面是一个基本的HTML5搜索栏代码：

form action="#" method="get">
    input type="search" placeholder="Search">
    button type="submit" value="Search">
    搜索/button>
    /form>
    

上面的代码使用了form标签、input标签和button标签来创建搜索栏。我们可以为搜索栏添加一些样式来美化它：

form action="#" method="get" class="search-form">
    input type="search" placeholder="Search" class="search-input">
    button type="submit" value="Search" class="search-button">
    搜索/button>
    /form>
    style>
.search-input {
    border: none;
    background-color: #f1f1f1;
    padding: 10px;
    width: 70%;
    margin-right: -3px;
    font-size: 16px;
    outline: none;
}
.search-button {
    background-color: #b3d4fc;
    border: none;
    color: #fff;
    padding: 10px;
    width: 30%;
    font-size: 16px;
    cursor: pointer;
}
.search-button:hover {
    background-color: #9db6d8;
}
.search-form {
    display: flex;
}
    /style>
    

上面的代码使用了style标签来添加CSS样式，我们为搜索栏的输入框和按钮分别设置了不同的规则，从而实现了不同的效果。此外，我们使用了flex布局来使输入框和按钮处于同一行，并且添加了鼠标悬停时的背景色变化效果。

总之，HTML5搜索栏样式代码可以让我们在网页设计中更加灵活地应用搜索栏元素，从而为用户提供更好的搜索体验。

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