Как я могу показать / скрыть родственные браки в 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, невозможно сделать это без JavaScript, учитывая текущую разметку HTML. Родственные и смежные селекторы 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>