html - 使用 :focus-within 创建扩展搜索栏时的问题

Question

我想制作一个搜索栏作为本网站的搜索栏：https ://www.arrivalguides.com/en 。

我试过这段代码：（这是一个codepen）

HTML：

<div class="col-md-4 d-flex justify-content-end all-buttons">
  <div class="col-md-4 d-flex justify-content-end search-bar">
    <a  nbButton  outline class="text-decoration-none add-btn" id="add-btn-hide" >
      <i class="nb-plus fa-1x"> </i> Add User
    </a>

    <button nbButton class=" multi-delete-btn" id="delete-btn-hide" >
      <i class="nb-trash fa-2x"></i>
      Delete All
    </button>

    <input type="text" class="search-input" id="search-input" fullWidth nbInput placeholder="Enter Search" (keyup)="onKey($event)" />
    <button nbButton class="search-btn" nbTooltip="Quick Search " nbTooltipPlacement="top" status="primary">
<!--       <nb-icon icon="search-outline"></nb-icon> -->icon
    </button>
  </div>
</div>

CSS：

body{
  margin:40px;
}

.all-buttons {
  height: 30px;
  padding-right: 0;
}

.info-btn {
  padding: 0.4rem;
  border-radius: 0.25rem;
  margin-right: 3px;
  background-color: blue;
  border-color: blue;
}

.advanced-filters {
  background-color: green;
  padding: 0.6rem 0 0 0;
  border-radius: 0.5rem;
  margin-left: 1px;
}

.multi-delete-btn {
  margin: 0 8px 0 3px;
  color:white;
  background-color: orange;
  border-color:orange;
  border-radius: 0.25rem ;
  padding: 0 5px 0 0 ;
  opacity: 1 !important;
   transition: width 0.5s ease-out;
}
.add-btn {
  border-color:blue ;
  background-color: blue ;
  color: white;
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin: 0 ;
  opacity: 1 !important;
   transition: width 0.5s ease-out;
}
.search-bar {
  border: none !important;
  margin-right: 2px !important;
  border-radius: 100px ;
  min-width: 33px !important;
  position: relative;
  transition: width 0.5s ease-out;
}
.search-input {
  background: transparent;
  border: 0;
  background-color: lightblue;
  opacity: 0;
  width:40px !important;
  transition: width 0.5s ease-out;

  &:focus {
    outline: 0;
    
  }
}
.search-btn {
  cursor: pointer;
  border: 2px solid blue;
  border-radius: 0.25rem !important;
  background: transparent;
  margin: 0 !important;
  position: absolute ;
  top:0 ;
  bottom:0;
  right: 0;
}

.search-bar:focus-within{
  width:50% !important;
  border: 2px solid brown !important;

  .search-input{
    width: 100% !important ;
    background-color: rgba(196, 158, 233, 0.205);
    color: black !important;
    cursor: initial ;
    opacity: 1;
  }
  .add-btn{
   display: none !important;

  }
  .multi-delete-btn{
   display: none!important;

  }
}

问题：
当我在搜索图标之外单击时，应该会出现“添加”按钮和“全部删除”按钮。但就我而言，他们只是在移动。（当我点击搜索图标时，添加按钮和全部删除按钮消失了——这没关系）

标签： htmlcss

Answer 1

这是一种仅隔离搜索输入和搜索输入容器的方法。输入绝对位于相对容器内，以便我可以从右到左增加输入。我通过使用right: 0.

我正在合并focus-within并placeholder-shown扩大/缩小input. 如果用户在输入中键入了某些内容，则需要使用 usingplaceholder-shown来防止输入缩小。为了隐藏占位符文本并仅在缩小输入时显示搜索图标，我将占位符文本设置为 color transparent。

.search-input-container {
  position: relative;
}

.search-input {
  --search-icon-width: 24px;
  --search-max-width-expanded: 20rem;
  --search-max-width-collapsed: 2.3rem;
  --search-color: #ccc;
  background-color: var(--search-color);
  max-width: var(--search-max-width-collapsed);
  padding: .5rem 0.75rem;
  overflow: hidden;
  transition: 0.3s max-width, 0.3s margin;
  border: none;
  background-image: url(https://image.flaticon.com/icons/png/512/93/93642.png);
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) 50%;
  position: absolute;
  right: 0;
  font-size: 16px;
  border-radius: 15px;
}

.search-input:focus-within,
.search-input:not(:placeholder-shown) {
  max-width: var(--search-max-width-expanded);
  padding-right: var(--search-icon-width);
}

.search-input:not(:focus-within)::placeholder {
  color: transparent;
}


/* Ignore */

body {
  display: grid;
  place-items: center;
}

<div class="search-input-container">
  <input placeholder="search" type="search" class="search-input">
</div>