在Web开发中,
搜索框是
一个非常常见的组件。为了让
搜索框看起来更加漂亮,我们通常需要使用CSS来对其进行样式设计。
首先,我们可以使用HTML的input
标签来创建
搜索框。例如:
<input type="text" id="search-input" placeholder="搜索...">
其中,type
属性设置为"text"表示这是
一个文本输入框,id
属性为"search-input"用于后续的CSS样式设置,placeholder
属性则设置了
搜索框的
提示文本。
接下来,我们将使用CSS来为
搜索框
添加样式。例如:
p {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
#search-input {
border: 1px solid #ccc;
border-radius: 5px;
padding: 8px 12px;
width: 200px;
Box-shadow: 0 0 5px #ccc;
}
#search-input:focus {
Box-shadow: 0 0 5px #5da4fd;
border-color: #5da4fd;
}
在上述
代码中,我们使用了p
标签来为
文章添加段落。其中,font-size
属性设置字体大小,font-weight
属性设置字体粗细,margin-b
ottom
属性设置段落和段落之
间的间隔。
接下来,我们使用id为"search-input"的选择器来为
搜索框
添加样式。border
属性设置边框样式,border-radius
属性设置边框圆角,padding
属性设置内边距大小,width
属性设置
搜索框的宽度,
Box-shadow
属性设置
搜索框的阴影样式。
当
搜索框获得焦点时,我们使用:focus伪类来为其
添加样式。
在这里,我们
增加了阴影和边框颜色的变化,使
搜索框看起来更加活跃和生动。
通过这样的方式,我们可以使用CSS来制作出
一个漂亮的
搜索框,为我们的网站
添加一份美观和实用。