当前位置：首页 > 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表格制作表格

CSS 表格制作方法使用 CSS 创建表格可以通过多种方式实现，包括原生 HTML 表格元素结合 CSS 样式，或者使用纯 CSS 布局技术（如 Flexbox 或 Grid）模拟表格效果。以下是常…

css 制作按钮

基础按钮样式使用CSS创建一个基础按钮需要定义padding、background-color、border和border-radius等属性。以下是一个简单示例： .button { pad…

css样式表制作

CSS样式表制作基础 CSS（层叠样式表）用于控制网页的视觉呈现。通过CSS可以定义字体、颜色、布局等样式属性。内联样式直接在HTML标签中使用style属性定义样式： <p style…

表格制作css

基础表格样式使用CSS可以轻松地为HTML表格添加样式。以下是一个基础表格的HTML和CSS示例： <table class="basic-table"> <thead>…

css制作相册

使用CSS Grid布局制作相册 CSS Grid布局非常适合创建响应式相册，能够灵活调整行列和间距。 .photo-gallery { display: grid; grid-templa…

css制作锁屏页面

使用CSS制作锁屏页面锁屏页面通常包含一个背景、时间显示以及可能的解锁按钮或输入框。以下是实现锁屏页面的关键CSS代码和结构。 HTML结构 <!DOCTYPE html> <…

css制作搜索