当前位置：首页 > CSS

css制作搜索

2026-02-27 04:02:23CSS

CSS 制作搜索框的方法

搜索框是网页常见的交互元素，通过CSS可以美化其外观并提升用户体验。以下是几种常见的实现方法：

基础样式

css制作搜索

.search-box {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
  outline: none;
  font-size: 16px;
}

带图标样式

.search-container {
  position: relative;
  display: inline-block;
}

.search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #777;
}

.search-input {
  padding-right: 30px;
}

动画效果

css制作搜索

.search-box:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);
  transition: all 0.3s ease;
}

响应式设计

@media (max-width: 768px) {
  .search-box {
    width: 100%;
  }
}

完整HTML示例

<div class="search-container">
  <input type="text" class="search-box" placeholder="搜索...">
  <i class="search-icon">🔍</i>
</div>

这些方法可以根据实际需求组合使用，通过调整颜色、尺寸和动画效果来创建符合网站风格的搜索框。

标签: css

分享给朋友：

css 导航栏制作

水平导航栏制作使用无序列表<ul>和<li>标签构建基础结构，通过CSS将列表项横向排列 <nav> <ul class="horizontal-na…

css制作圆弧

CSS 制作圆弧的方法使用 border-radius 属性通过 border-radius 可以轻松创建圆弧效果。该属性控制元素的圆角大小，值越大圆弧越明显。例如： .arc { widt…

制作css开关

使用纯CSS创建开关 HTML结构需要包含一个隐藏的复选框和一个关联的标签元素： <label class="switch"> <input type="checkbox"&g…

css样式制作

CSS样式制作基础 CSS（层叠样式表）用于控制网页的视觉呈现。通过CSS可以定义字体、颜色、布局等样式。选择器与属性 /* 标签选择器 */ p { color: blue; font…

css表单制作

表单基础结构使用HTML创建表单容器，包含<form>标签及输入字段。表单通常需要<input>、<label>、<textarea>等元素。…

css制作表单

创建基本表单结构使用HTML的<form>标签作为表单容器，内部包含输入字段、标签和提交按钮。表单元素通常需要<label>关联以提高可访问性。 <form>…

css制作搜索