如何在SCSS中显示/隐藏同级跨度？

Question

采用以下设计：

如果不显示输入的占位符，我想隐藏“放大镜”图标并显示“关闭” X图标。

我的标记是：

input:not(:placeholder-shown) {
   // hide 'magnifier' icon
   // show 'close' icon
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group input-group-sm w-50" id="search-box">
  <div class="input-group-prepend">
     <span class="input-group-text bg-white" id="input-magnifier">
        <i class="fa fa-search text-muted"></i>
     </span>
     <span class="input-group-text bg-white">
        <i class="fa fa-close text-muted"></i>
     </span>
  </div>

  <input type="search" placeholder="Search with &#39;exact match&#39;" class="form-control" />

  <div class="input-group-append">
    <div class="dropdown btn-group" role="group">
        <button class="btn btn-light btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">filters</button>            
    </div>
  </div>
</div>

如何使该输入组以这种方式运行？换句话说，如何从Scss中的输入元素访问图标？

Answer 1

由于CSS的工作方式，鉴于您当前的html标记，没有javascript就无法做到这一点。 CSS兄弟和相邻选择器只能选择在给定元素之后 的元素，因为CSS从顶部到底部通过标记“层叠”。

也就是说，如果您切换标记，则绝对可以实现。幸运的是，输入组类已经具有display:flex;，因此，如果移动子元素，仍然可以使用order属性来控制显示顺序。

然后您要做的就是使用+（相邻）选择器。请参阅随附的代码。

/* CSS adjacent selectors used here, to select the prepend
   class only when the placeholder is shown or not shown */

input:not(:placeholder-shown)+.input-group-prepend #input-magnifier {
  display: none;
}

input:placeholder-shown+.input-group-prepend #input-delete {
  display: none;
}


/* This is the code used to reorder the elements so that
   the buttons still appear before the input */

.input-group-prepend {
  order: -1;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group input-group-sm w-50" id="search-box">


  <input type="search" placeholder="Search with &#39;exact match&#39;" class="form-control" />

  <!-- moved .input-group-prepend div to here so that the adjacent selector works -->
  <div class="input-group-prepend">
    <span class="input-group-text bg-white" id="input-magnifier">
        <i class="fa fa-search text-muted"></i>
     </span>
    <span class="input-group-text bg-white" id="input-delete">
        <i class="fa fa-close text-muted"></i>
     </span>
  </div>

  <div class="input-group-append">
    <div class="dropdown btn-group" role="group">
      <button class="btn btn-light btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">filters</button>
    </div>
  </div>
</div>