Ways to conceal the label without using JavaScript when focusing

Question

Ways to conceal the label without using JavaScript when focusing

I am trying to find a way to hide the label "phone number" when the input is in focus by simply clicking on it. I have attempted using CSS but I need a more effective solution. Please let me know if you can help.

<div class="form-row">
        <div class="input-data">
          <select class="phone-select">
            <option>+91</option>
            <option>+92</option>
          </select>

          <input class="phone-input" type="text">
          <div class="underline"></div>
          <div class="phone-label">
            <label>Phone No.</label>
          </div>
        </div>
      </div>

javascript html css

Answer 1

Answer №1

You can implement the General sibling combinator

.phone-input:focus~div.phone-label label {
  display: none;
}

<div class="form-row">
  <div class="input-data">
    <select class="phone-select">
      <option>+91</option>
      <option>+92</option>
    </select>

    <input class="phone-input" type="text">
    <div class="underline"></div>
    <div class="phone-label">
      <label>Phone Number</label>
    </div>
  </div>
</div>

The general sibling combinator (~) is a CSS selector that pairs two elements and selects all instances of the second element, which follow the first element (not necessarily immediately), and are children of the same parent element.

Answer 2

You can implement the General sibling combinator

.phone-input:focus~div.phone-label label {
  display: none;
}

<div class="form-row">
  <div class="input-data">
    <select class="phone-select">
      <option>+91</option>
      <option>+92</option>
    </select>

    <input class="phone-input" type="text">
    <div class="underline"></div>
    <div class="phone-label">
      <label>Phone Number</label>
    </div>
  </div>
</div>

The general sibling combinator (~) is a CSS selector that pairs two elements and selects all instances of the second element, which follow the first element (not necessarily immediately), and are children of the same parent element.

Answer 3

Answer №2

Here's a sample for you :)

.phone-input:focus ~ .phone-label {
    visibility: hidden;
}

Answer 4

Here's a sample for you :)

.phone-input:focus ~ .phone-label {
    visibility: hidden;
}

Answer 5

Answer №3

To make the CSS selector .field:focus .element-to-style work, I had to wrap the input and div elements in a parent div.
After that, it's simply applying basic opacity styling using CSS.

.phone-input:focus + .phone-label {
  opacity: 1;
}
.phone-label {
  opacity: 0;
}

<div className="form-row">
    <div className="input-data">
    <select className="phone-select">
        <option>+91</option>
        <option>+92</option>
    </select>
    <div>
        <input className="phone-input" type="text" />
        <div className="phone-label">
        <label>Phone No.</label>
        </div>
    </div>
    <div className="underline"></div>
    </div>
    </div>
<style>
.phone-input:focus + .phone-label {
  opacity: 1;
}
.phone-label {
  opacity: 0;
}
</style>
</div>

You can test the code here:

Answer 6

To make the CSS selector .field:focus .element-to-style work, I had to wrap the input and div elements in a parent div.
After that, it's simply applying basic opacity styling using CSS.

.phone-input:focus + .phone-label {
  opacity: 1;
}
.phone-label {
  opacity: 0;
}

<div className="form-row">
    <div className="input-data">
    <select className="phone-select">
        <option>+91</option>
        <option>+92</option>
    </select>
    <div>
        <input className="phone-input" type="text" />
        <div className="phone-label">
        <label>Phone No.</label>
        </div>
    </div>
    <div className="underline"></div>
    </div>
    </div>
<style>
.phone-input:focus + .phone-label {
  opacity: 1;
}
.phone-label {
  opacity: 0;
}
</style>
</div>

You can test the code here:

Ways to conceal the label without using JavaScript when focusing

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing the power of THREE.ShaderLib.phong while integrating subsurface scattering within ThreeJS

Providing parameters to a helper function in one class which invokes a method in another class

Adjust image size with react - personalize styling for react-easy-crop

What steps do I need to follow to write this function in TypeScript?

The functionality of 'Access-Control-Allow-Origin': '*' is not operational

Having trouble retrieving JSON with crossDomain jQuery AJAX

Achieving uniform cell height distribution in Foundation XY-grid using flexbox

What is the best way to show the user's name on every page of my website?

Looking for assistance in minimizing the gap between the banner and content on my Weebly website

Unable to toggle navigation menu visibility on responsive design

Using JavaScript, learn how to extract query parameters and encoded information from a URI

What's the best way to adjust text color to black or white for maximum contrast when the background changes?

How to create a floating <Toolbar/> with ReactJS, Redux, and Material-UI

Receiving JSON data and saving it into an array in JavaScript

Insert a new row into a table using tablesorter jQuery

Converting Apache POI Word documents to clean HTML stripping out styles and superfluous tags

How can complex POST parameters be structured in a RESTful API?

JavaScript obtain scroll position of a child element

Having trouble with your Bootstrap Accordion panels?

Arranging Divs into Two Columns in CSS - A Simple Guide