搜索条件折叠html,HTML实例之搜索栏（附源码）

HTML实例之搜索栏(附源码)

1. 简书类

实现效果

html代码

css代码

* {

margin: 0;

padding: 0;

}

.container {

height: 70px;

width: 800px;

margin: 100px auto 0 auto;

}

.parent {

position: relative;

}

.search {

width: 300px;

height: 40px;

border-radius: 18px;

outline: none;

border: 1px solid #ccc;

padding-left: 20px;

position: absolute;

}

.btn {

height: 35px;

width: 35px;

position: absolute;

background: url("images/topbar.png") no-repeat -2px -99px;

top: 6px;

left: 285px;

border: none;

outline: none;

cursor: pointer;

}

2. 百度类

实现效果

html代码

css代码

重点：

1.当input框foucus时，border颜色改变，而不是保留outline

2.button按钮默认box-sizing: border-box

.container {

width: 500px;

height: 50px;

margin: 100px auto;

}

.parent {

width: 100%;

height: 42px;

top: 4px;

position: relative;

}

.parent>input:first-of-type {

/*输入框高度设置为40px, border占据2px，总高度为42px*/

width: 380px;

height: 40px;

border: 1px solid #ccc;

font-size: 16px;

outline: none;

}

.parent>input:first-of-type:focus {

border: 1px solid #317ef3;

padding-left: 10px;

}

.parent>input:last-of-type {

/*button按钮border并不占据外围大小，设置高度42px*/

width: 100px;

height: 44px;

position: absolute;

background: #317ef3;

border: 1px solid #317ef3;

color: #fff;

font-size: 16px;

outline: none;

}