[分享]css3搜索框大全

CSS3搜索框是现代网站设计中经常使用的一种元素，它可以让用户更加方便地查找所需要的信息。下面是一些常用的CSS3搜索框样式，欢迎取用。/ 搜索框样式1 / .searchbox1 { : relat...

CSS3搜索框是现代网站设计中经常使用的一种元素，它可以让用户更加方便地查找所需要的信息。下面是一些常用的CSS3搜索框样式，欢迎取用。

/* 搜索框样式1 */
.search-box1 {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.search-box1 input[type="text"] {
    width: 180px;
    height: 28px;
    padding: 0 10px;
    border: none;
    outline: none;
    box-sizing: border-box;
}

.search-box1 button {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 30px;
    background: #448aff;
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
}

/* 搜索框样式2 */
.search-box2 {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.search-box2 input[type="text"] {
    width: 160px;
    height: 28px;
    padding: 0 10px;
    border: none;
    outline: none;
    box-sizing: border-box;
    float: left;
}

.search-box2 button {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 30px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

.search-box2 button img {
    width: 20px;
    height: 20px;
}

/* 搜索框样式3 */
.search-box3 {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.search-box3 input[type="text"] {
    width: 180px;
    height: 28px;
    padding: 0 10px;
    border: none;
    outline: none;
    box-sizing: border-box;
    background: transparent;
}

.search-box3 input[type="text"]:focus {
    background: #fff;
}

.search-box3 button {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 30px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

.search-box3 button img {
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
} 

以上是三种常见的CSS3搜索框样式，可以根据需要进行调整。希望这篇文章能够对大家有所帮助。