[分享]css3搜索标签

CSS3搜索标签介绍搜索标签是Web开发中经常用到的标签，主要用于实现搜索框的样式。而CSS3提供了一些新的搜索样式，如：外观、交互和动画等。下面将介绍几种常用的搜索标签样式：样式一：圆角.searc...

CSS3搜索标签介绍

搜索标签是Web开发中经常用到的标签，主要用于实现搜索框的样式。而CSS3提供了一些新的搜索样式，如：外观、交互和动画等。下面将介绍几种常用的搜索标签样式：

样式一：圆角

.search {
    border-radius: 10px;
    padding: 10px;
}

样式二：渐变

.search {
    background: linear-gradient(to bottom, #fff, #ccc);
    padding: 10px;
}

样式三：边框动画

.search {
    border: 2px solid #ccc;
    padding: 10px;
}
.search:hover {
    border: 2px solid #7e7e7e;
    transition: border-color .2s ease-in;
}

样式四：搜索图标

.search {
    position: relative;
}
.search input[type="text"] {
    font-size: 16px;
    padding-left: 50px;
}
.search:before {
    content: url(search.png);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

以上就是CSS3搜索标签的几种样式，可以根据需求进行选择和应用。