【css】手写搜索框

虽然目前有很多直接可用的UI组件库，但是在实际生产开发中经常要根据设计图对搜索框进行样式修改，与其不停地穿透穿透比如直接使用手写的<div>，样式更加灵活可靠，下面是我经常复用的搜索框，根据实际项目对样式进行修改就可以了。

<div class="search-wrapper">
    <input type="text" placeholder="请输入搜索关键词" class="input-area">
    <div class="search-icon"></div>
</div>

样式如下：

.search-wrapper {
    width: 235px;
    height: 40px;
    /* background: linear-gradient(to right, #ffff00, #ffeb3b); */
    background: linear-gradient(45deg, #e1bee7, #9575cd);
    border-radius: 20px;
    display: flex;
    align-items: center;
}
.input-area {
    all: unset;
    width: 190px;
    height: 40px;
    padding-left: 10px;
    align-items: center;

    color: #fff;
    text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.34);
    /* text-shadow: [水平偏移] [垂直偏移] [模糊半径] [颜色]; */
}
.input-area::placeholder{
    color: #fff;
}
.search-icon {
    width: 35px;
    height: 35px;
    background: url('./search.png') no-repeat center/cover;
}

scss嵌套语法

.search-wrapper {
  width: 235px;
  height: 40px;
  background: linear-gradient(45deg, #e1bee7, #9575cd);
  border-radius: 20px;
  display: flex;
  align-items: center;

  .input-area {
    all: unset;
    width: 190px;
    height: 40px;
    padding-left: 10px;
    color: #fff;
    text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.34);

    &::placeholder {
      color: #fff;
    }
  }

  .search-icon {
    width: 35px;
    height: 35px;
    background: url('./search.png') no-repeat center/cover;
  }
}