css搜索动态 |css图片固定比例缩放

form {
position: relative;
margin: 0 auto;
width: 300px;
height: 50px;
}
input[type="text"] {
width: 100%;
height: 100%;
padding: 0 10px;
border: none;
border-radius: 50px;
background-color: #EEE;
color: #444;
outline: none;
transition: background-color 0.3s ease-in-out;
}
input[type="text"]:hover {
background-color: #DDD;
}
input[type="text"]:focus {
background-color: #FFF;
color: #111;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset;
}
button {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
border: none;
background-color: transparent;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #BBB;
transition: color 0.3s ease-in-out;
}
button:hover {
color: #777;
}
button:focus {
outline: none;
color: #444;
}

上面的代码实现了一个简单的搜索框，其中最重要的当属对input[type=”text”]元素的样式设置。当鼠标悬停在文本框上时，文本框的背景颜色会发生变化，当文本框获得焦点时，背景颜色也会有所变化。此外，还设置了input[type=”text”]元素的圆角以及按钮的样式。可以看出，通过CSS技术，大家可以实现非常漂亮的搜索框动态效果。