css怎么做搜索框 |dreamweaver css规则定义

/* CSS搜索框样式 */
.search-box {
position: relative;
width: 100%;
}
.search-box input[type="text"] {
width: 100%;
padding: 10px;
border-radius: 5px;
box-shadow: none;
border: 1px solid #ccc;
font-size: 16px;
outline: none;
}
.search-box input[type="submit"] {
position: absolute;
right: 0;
top: 0;
color: #fff;
background-color: #2196F3;
border: none;
padding: 10px 15px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}

以上CSS代码展示了一个简单的搜索框布局样式。需要将输入框和提交按钮置于同一个搜索框容器中。为了确保输入框的大小和形状，选择器被设置为’input[type=”text”]’。

在上述例子中，直接应用了基本的样式，包括边框、阴影和填充等。通过添加着色、背景或动画等效果，可以使搜索框更加生动有趣。

以下是一个使用CSS渐变和动画效果的搜索框例子：

/* CSS搜索框样式 - 使用渐变色 */
.search {
display: flex;
flex-direction: row;
justify-content: center;
}
.search input[type="text"] {
background: linear-gradient(#8684ff, #faff00);
border: none;
border-radius: 30px;
font-size: 18px;
color: #fff;
padding: 10px 20px;
width: 200px;
transition: width 0.5s;
}
.search input[type="text"]:focus {
width: 300px;
cursor: pointer;
}

这个搜索框使输入框获得了一个独特的渐变背景。 当用户聚焦到输入框上时，它的宽度会扩展到300px，并伴有过渡效果。

CSS可以让设计人员更加灵活地制作搜索框效果，通过添加颜色、形状和动态效果，可以使搜索框更加生动有趣，吸引用户的注意。