Struggling to conceal text in CSS when input field is populated in HTML?

In my HTML, there is an input box that works fine. Here is the code:

.lolan:placeholder-shown+.form__label {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-4rem);
  transform: translateY(-4rem);
}
<input class="lolan" type="text" id="name" placeholder="Full Name" required />
<label for="name" class="form__label">Click "Download" To Get Your Card</label>

Now, I wanted to add another label above the input box so it displays before any text is typed and hides after text is entered. Here is the code I tried:

.lolan:placeholder-shown - .form__labell {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-4rem);
  transform: translateY(-4rem);
}
<label for="name" class="form__labell">Click "Download" To Get Your Card</label>
<input class="lolan" type="text" id="name" placeholder="Full Name" required />

This modification is not working as expected. Can someone please help troubleshoot this?

htmlcssinputlabelhidden

Answer №1

The symbol for adjacent sibling combinator is +</, and for the general sibling combinator, it's ~. Interestingly, there isn't a previous adjacent sibling combinator denoted by -.

If you want to maintain the order of elements in your markup but display them in reverse, you can achieve this using the flexbox property along with the order property.

div {
 display: flex;
}

input { order: 2 }
label { order: 1 }

input:not(:placeholder-shown) + label {
   opacity: 0;
   visibility: hidden;
   -webkit-transform: translateY(-4rem);
   transform: translateY(-4rem);
}
<div>
  <input class="lolan" type="text" id="name" placeholder="Full Name" required />
  <label for="name" class="form__labell">Click "Download" To Get Your Card</label>
</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

The event.pageY position consistently reflects the laptop screen size rather than the exact position where the click occurred

My webpage is scrollable, but the event.pageY position always corresponds to my screen size. Even when scrolling down and clicking near the top of the screen, it registers as 50px. I am currently utilizing event.pageY While this functions correctly on a ...

javascriptjqueryhtmlcss

"do not make use of inline labels in bootstrap version 4

I'm working on displaying a bootstrap 4 label for a dropdown hyperlink next to some text. Here is the HTML code I have: <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="http://exampl ...

htmltwitter-bootstrapbootstrap-4

Adjust the alignment and size of the flexible image to be centered horizontally

I have an image with dimensions of 3051 x 1716 pixels. https://i.sstatic.net/Y3Wi7m.jpg While viewing it on mobile, I would like to adjust it to look like this without cropping the image or uploading it again: https://i.sstatic.net/lJ1NSm.jpg In other ...

htmlcss

Using Angular 2 to round a calculated number within HTML

In the HTML code, there is a calculated number associated with Component1. Component1 serves as a tab page within a Bootstrap tab panel. Below is the HTML code with the tab panel: <div id="minimal-tabs" style="padding:75px;padding-top:60 ...

htmlangulartypescriptangular-pipe

Designing a Bootstrap layout with twin divs adjacent to each other

I am trying to design a webpage with two Divs positioned side by side using bootstrap styles. However, the code I have been using is not yielding the desired outcome. Is there anyone who can offer me some guidance on how to achieve this? Thank you. < ...

jqueryhtmlcsstwitter-bootstrap

Struggling to decide on the perfect CSS selector for my puppeteer script

I am trying to use puppeteer page.type with a CSS selector. <div class="preloader"> <div class="cssload-speeding-wheel"></div> </div> <section id="wrapper" class="login-register"> <div class="login-box"> <d ...

javascripthtmlcsspuppeteer

Using CSS to apply font characters as background images

Is it possible to use a font character, like one from font-awesome, as a background-image for an input element? <style> #id { background-image: content('\f2d3'); /* content instead of url() */ background-position: right center; ...

csssvgbackground-imagebackground-positioncss-content

Transferring Data Between Tables in ASP.NET Core

I'm in the process of creating a new online store with ASP.NET Core. I have a requirement to transfer data from the Products table to the Items table upon clicking a button, so that the item information can be displayed on the shopping cart page. Any ...

htmlasp.net-core

Yet another iteration of an SQL query within a loop for row querying

I am currently facing a coding dilemma as I work on creating a News Feed feature. The functionality of the news feed is satisfactory, but now I wish to enhance it by adding an avatar picture to each news row, representing the author. However, the path to ...

phpjqueryhtmlsqlloops

Setting a placeholder for an img tag in Angular: A step-by-step guide

What is the process for adding a placeholder to an image in AngularJS using the img element? I am currently setting the image dynamically with ng-src in my application. ...

angularjshtml

Developing a unique dark theme for bootstrap without the need for redundant CSS coding

Currently, I am exploring the most effective way to structure my SCSS dark theme for optimal maintainability. Bootstrap 5 offers the option of setting the data-bs-theme='dark' attribute on the HTML body tag to switch between light and dark themes ...

csstwitter-bootstrapbootstrap-4bootstrap-5ruby-on-rails-7

Avoid using <input oninput="this.value = this.value.toUpperCase()" /> as it should not convert the text displayed on the "UI", rather it should send the uppercase value

<input oninput="this.value = this.value.toUpperCase()" type="text" id="roleName" name="roleName" class="form-control width200px" [(ngModel)]="role.roleName"> Even though the UI is changing ...

htmlangulartypescript

Excessive content and the upper limit of height

I'm in the process of creating a scrolling table with a maximum height, and here's what I've done so far: <table> <tbody style="height: 300px; overflow:auto;"> //php for loop to populate table with <tr>s/<td>s </t ...

htmlcss

What techniques does Google use to craft mobile-friendly fixed backgrounds and parallax content within iframes?

Currently, I am working on a test that involves utilizing an intersectionobserver in conjunction with iframe postMessage to adjust the background image in a translate3d manner within the iframe. However, this method is causing significant jitter and potent ...

javascriptcssiframeads

In Angular.js, there is a limitation with ng-keyup where event.preventDefault() cannot be utilized, and ng-keypress may have delays when updating the value for an

Issue: The input type number with min and max constraints is not being enforced while typing in the input box. It allows values outside of the specified range to be entered. However, using the arrow buttons of the input type number works fine. Solution Ne ...

javascriptangularjsinput

Ways to extract href attributes from a div element using xpath

I currently have a div setup like this: <div class="widget-archive-monthly widget-archive widget"> <h3 class="widget-header">Monthly <a href="http://myblog.com/blogs/my_name/archives.html">Archives</a></h3> < ...

htmlcssxpath

The website's responsiveness appears to be malfunctioning on iPhone 10 and other iOS devices

I have implemented the code below for redirecting my website in an iframe, and it displays perfectly on all browsers except Safari on iPhone. I have tested it on various models of iPhones. <head> <title>My Website</title> <meta name=" ...

htmlioscssiphonebootstrap-4

What is the best way to create an HTML template with a table where the first column is divided into four cells and the second column only has one

Currently, I am working on a template using HTML and CSS. One issue that I am facing involves designing a table template with HTML and CSS. The specific problem occurs in the second row of the table where there are 4 cells in the first column and only one ...

javascripthtmljquerycssbootstrap-4

Unable to set focus on a disabled button programmatically, issue persists

$(function () { $('#save').click(function() { $('#save').attr('disabled', 'disabled'); console.log($(document.activeElement).attr('id')); }); $('#test').focus(); co ...

jqueryhtmlbutton

Is there a way to have a span update its color upon clicking a link?

I have 4 Spans and I'm looking to create an interactive feature where clicking a link in a span changes the color of that span. Additionally, when another link in a different span is clicked, the color of that span changes while reverting the previous ...

javascriptjqueryhtmlcss