时间戳

首页 > 解决方案 > 如何在 SCSS 中显示/隐藏兄弟跨度？

css - 如何在 SCSS 中显示/隐藏兄弟跨度？

问题描述

鉴于以下设计：在此处输入图像描述

我想隐藏“放大镜”图标并显示“关闭”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 中的输入元素访问图标？

标签： csssassbootstrap-4

解决方案

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

也就是说，如果你切换你的标记，你绝对可以实现这一点。幸运的是， input-group 类已经有了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>

推荐阅读