What is the best way to toggle the display of sibling spans using SCSS?

Looking at this design:https://i.sstatic.net/DGFjE.png

In order to achieve the desired outcome of hiding the 'magnifier' icon and showing the 'close' X icon when the input's placeholder is not visible, I have the following markup:

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>

What steps can be taken to make the icons behave as described in the input group? And how would one go about accessing the icons from the input element using Scss?

csssassbootstrap-4

Answer №1

Due to the nature of CSS, achieving this without JavaScript is not possible with your current HTML structure. CSS selectors can only target elements that come after a specific element due to the cascading nature of CSS styles.

However, by rearranging your markup, you can achieve the desired outcome. The input-group class already uses display:flex;, allowing you to control the order of elements using the order property.

You can then utilize the adjacent selector (+) in CSS. Below is an example of how it can be used:

/* Use CSS adjacent selectors to target the prepend class based on whether the placeholder is shown or hidden */

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

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


/* Reordering elements to ensure buttons appear before the input field */

.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 here for the adjacent selector to work -->
  <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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

connect to new database using mysqli_find_cat

<?php $host = "localhost"; $username = "root"; $password = ""; $db = "mineforums"; $connect = mysqli_connect($host, $username, $password, $db) or die(mysqli_error($connect)); ?> Here is the PHP snippet that connects to my databa ...

phphtmlmysqlcss

Achieve perfect alignment both vertically and horizontally within a container-fluid using Bootstrap

As the heading suggests, I'm having trouble centering content inside a column within .container-fluid in Bootstrap 4. Below is the code I'm using, but I can't figure out what's wrong. Can someone please assist me? <link href="htt ...

htmltwitter-bootstrapcssbootstrap-4

Having trouble adding Bootstrap to Angular with Webpack? You might come across the error message: "File to import not found or unreadable: ../bootstrap/sc

I have decided to incorporate Bootstrap into my project. My attempt at installation involved using "bootstrap": "^4.0.0-alpha.5" I followed a tutorial found at https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-4-and-Sass- ...

fileangularwebpackbootstrap-4

Step-by-step guide to displaying the dropdown menu button content at the top of the page in main.html by using the frameset tag

The layout of my main.html involves displaying menu.htm and welcome.htm using frameset. One issue that arises is with the drop-down menu buttons "Admin..." and "Scheduler...". When hovering over these buttons, the dropdown content does not display properly ...

javascripthtmlcss

Troubleshooting layout problems caused by positioning items at window height with CSS and jQuery

At this moment, my approach involves utilizing jQuery to position specific elements in relation to the window's size. While this method is effective when the window is at its full size, it encounters issues when dealing with a debugger that's ope ...

javascriptjqueryhtmlcss

Tips for incorporating your personal touch while utilizing Snipcart

I have created an ecommerce platform with GatsbyJS and Snipcart, but I am struggling to override the default theme provided by Snipcart. When I try to change the main default CSS through gatsby-config.js, it does not seem to work. Does anyone have a soluti ...

javascriptcssreactjssnipcart

Animating vector graphics from a circle to a line using SVG

Is it possible to convert a circle into a line (path)? I'm having trouble finding information on how to shape the svg element. Perhaps my search technique is the issue. <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg ...

cssanimationsvg

Cursor customized image vanishes upon clicking anywhere on the page on a MAC in various web browsers

I am currently trying to set a custom image as the cursor using jQuery in this manner $(document).ready(function(){ $("body").css('cursor','url(http://affordable-glass.com/test/penguinSm.png),auto'); }); While this method works, ...

jqueryhtmlcss

Positioning close icon on Bootstrap 4 tab

I need help aligning a close icon for a BootstrapVue tab with Bootstrap 4.2 in the top right corner. Here is my code: <b-tab v-for="order in tabs" :key="order.id"> <template slot="title"> <span class="float-left">{{ order.nam ...

cssbootstrap-4bootstrap-vue

Focusing on a specific div element

I need help selecting the initial div block that contains the word "Target". <div class="box-content"> <div> <div>Target</div> <div>xxxx</div> <div>xxxx</div> <div>xxxx</div> ...

csscss-selectors

Responsive design element order rearrangement

My code example is as follows: <div class="info-container"> <span class="item1">item1</span> <a class="item2" href="#">item2</a> <a class="item3" href="#">item3</a> </div> I want to rearran ...

javascriptjqueryhtmlcssangularjs

What is the method for adjusting the size of text while rendering on a canvas?

When it comes to scaling text with CSS transform scale, for instance: transform: scale(2, 4); fontSize: 20px // Is including fontSize necessary? I also have the task of displaying the same text on a canvas element. function draw() { const ctx = document ...

javascriptcsshtml5-canvascss-transforms

Ways to extract specific HTML from a jQuery element

When fetching html from a website, how can I extract specific html content instead of getting all of it? I have attempted the following method: Before appending data to the target below container.html(data); I would like to perform something like data.f ...

javascriptjqueryhtmlcss

Switch out a static image for a dynamic YouTube video using CSS styling

I've been working on customizing a template website, and I want to switch out the current image for a YouTube video. I have the code from YouTube ready to go, but I'm not sure what changes need to be made in the template. Take a look at the CSS ...

htmlcssimagereplaceyoutube

How to create interactive SVG animations on hover

Currently, I have successfully animated an SVG file using the default svg functions like the following: <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 16 30" ...

htmlcsssvg

Optimizing Your CSS Loading Process for Production Environments

Lately, I've been loading a lot of JS and CSS files in my project. In an effort to boost my site's performance, I decided to use YUICompression integrated with Ant build. After each project build, it automatically creates a minified file by appen ...

javascriptcssantminifyyui-compressor

Differences in typography across Mozilla Firefox and Internet Explorer

I have come across a question that seems quite common, yet unsolvable. However, I will give it a try anyway. Take a look at this image: To view a larger version of the image, visit the following URL: https://i.stack.imgur.com/dddNm.jpg HTML code: <d ...

htmlcssbrowserfontsfont-size

Could you please ensure that the animation activates upon hovering over the "a" element?

Utilizing bootstrap, I have created the following code. I am looking to add functionality that triggers an animation upon mouseover of an img or a element, and stops the animation upon mouseleave. .progress-bar { animation: pr 2s infinite; } @keyfr ...

javascripthtmlcssbootstrap-4bootstrap-5

Looking for assistance with arranging and managing several containers, buttons, and modals?

My goal is to create a grid of photos that, when hovered over, display a button that can be clicked to open a modal. I initially got one photo to work with this functionality, but as I added more photos and buttons, I encountered an issue where the first b ...

javascripthtmlcssbuttonmodal-dialog

Steps to creating a proper cascade using the label statement

I am currently customizing the appearance of a checkbox. The HTML code in the file called fin1.cfm is as follows: <td>Master Event:</td> <td> <input type = "checkbox" id = "cb_e" name = "datesumm" value = "" > <label f ...

htmlcss