[分享]css中怎么建立搜索栏

搜索栏是网站中非常常见的元素之一，它可以让用户方便地搜索信息。CSS中建立搜索栏的方法可以通过以下几个步骤来完成。/ 基本样式 / .searchbox { : relative; } .search...

搜索栏是网站中非常常见的元素之一，它可以让用户方便地搜索信息。CSS中建立搜索栏的方法可以通过以下几个步骤来完成。

/* 基本样式 */
.search-box {
  position: relative;
}

.search-box input[type="text"] {
  border: none;
  background-color: #f2f2f2;
  width: 300px;
  height: 32px;
  border-radius: 16px;
  padding-left: 20px;
  padding-right: 40px;
  outline: none;
  font-size: 14px;
}

.search-box input[type="submit"] {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 32px;
  border: none;
  border-radius: 16px;
  background-color: #2d7bf1;
  color: #fff;
  cursor: pointer;
  outline: none;
  font-size: 14px;
}

/* 搜索框的提示文字 */
.search-box input[type="text"]::placeholder {
  color: #999;
}

/* 搜索框获取焦点时的特效 */
.search-box input[type="text"]:focus {
  box-shadow: 0 0 6px rgba(45, 123, 241, 0.5);
} 

第一步，我们需要一个包含搜索框的盒子，并对搜索框进行基本的样式设置。我们把输入框的背景色设置为浅灰色，边框去掉，圆角设置成16px。同时设置左侧内边距为20px，右侧内边距为40px，留出一定的空间放置搜索按钮和提示文字。输入框的字体大小设置为14px，以适应大部分设备的尺寸。

第二步，我们需要添加搜索按钮。通过绝对定位，将按钮放置在输入框的右侧。为了美观，我们将按钮的宽度设置为40px，圆角也设置为16px。按钮的背景色为蓝色，字体颜色为白色。同时将指针设置为手型，增加用户体验。

第三步，我们设置搜索框的提示文字。当用户还没有输入时，提示文字可以告诉用户需要搜索什么内容。这里我们将提示文字颜色设置为浅灰色，与输入框的背景色相符。当然，我们也可以设置其他颜色，以区分不同的网站风格。

最后一步，我们为搜索框增加了获取焦点时的特效，以增加用户体验。我们加入了一个阴影效果，当用户在输入框中输入内容时，输入框周围将会出现浅蓝色的光晕，使得用户能够更加明确的知道他们正在输入的位置。

综上所述，我们通过以上的CSS代码，可以快速建立一个美观实用的搜索栏，加强用户体验和网站的交互性。