Conceal or eliminate a section of the text within an HTML element with the help of CSS styling

The issue

I am facing a challenge where I need to change the display of HTML code without altering its output. While I know jQuery can help me achieve the desired results, I am wondering if it is possible to do so purely with CSS?

What needs to be done

I want to show the input element from the HTML below while getting rid of the unnecessary label. The text "Username" and line break tag should not be displayed.

It's clear that using 

label[for="user_login"]{ display: none; }
won't work as it would hide everything within the selector.

The original HTML

<label for="user_login">
    Username
    <br>
    <input id="user_login" class="input" type="text" size="20" value="" name="log">
</label>

The desired HTML

<label for="user_login">
    <input id="user_login" class="input" type="text" size="20" value="" name="log">
</label>

Preferred CSS over jQuery

$(document).ready(function(){

    var username_label = $('label[for="user_login"]'),
        username_input = username_label.find('input');

    username_label.html(username_input);

});

Reason for avoiding jQuery

The login form layout varies based on screen size. Labels need to be hidden on smaller screens to save space but visible on larger ones. Utilizing jQuery would remove labels across all screen sizes.

While I can detect screen width initially and use resize event if needed, sudden changes (e.g., tablet moving from portrait to landscape) may cause labels to disappear when they shouldn't.

Query

Is there a way to achieve similar results with pure CSS?

htmlcsshide

Answer №1

Check out this CSS solution:

label {
    visibility:collapse;
}

label input {
    visibility: visible; 
}

For a live demo, visit this jsfiddle link: http://jsfiddle.net/entgqjzk/

I made adjustments to the CSS code I came across in Hide text node in element, but not children

Update:

Although this solution doesn't eliminate whitespace as you mentioned, I came up with a combination of jQuery and CSS that may not be the most elegant, but it does the job when you can't alter the HTML structure:

Here's an updated jsfiddle link: http://jsfiddle.net/entgqjzk/2/

You could utilize the "hidden-for-mobile" CSS class along with a separate stylesheet for mobile devices or pseudo selectors for different screen sizes.

Answer №3

Big shoutout to @geoffreydv for suggesting the use of visibility.

Building on that, I managed to implement the CSS code below to effectively conceal the empty space occupied by the text inside the label.

body.login #loginform label[for="user_login"],
body.login #loginform label[for="user_pass"]{
    display:        inline-block;
    height:         50px;
    position:       relative;
    visibility:     collapse;
    width:          300px;
}

body.login #loginform input#user_login,
body.login #loginform input#user_pass{
    margin:         0;
    position:       absolute;
    top:            0;
    visibility:     visible;
    width:          300px;
}

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

Why is my CSS not recognizing the animation I specified for it to play?

I can't seem to get the simple animation I added to my code working properly. <div class="phone-center"> <div class="phone"> </div> </div> .phone-center { display: flex; justify-content: ce ...

csscss-animations

What is the best way to implement a seamless transition effect to a disappearing and appearing navbar using JavaScript?

I have a question regarding creating a navbar that appears and disappears using JavaScript when clicking on a button element. I've been able to achieve this functionality, but now I would like to add a smooth transition effect to make the navbar appea ...

javascripthtmlcsscss-animations

Want to develop a web application and incorporate Ajax into it?

I'm sure many of you have created an online application that streamlines processes and saves time and money for your company. So, how did it go when you added some Ajax to enhance the user experience after developing the application? Any recommendat ...

htmlajaxuser-interface

How you can fix the issue of the "Element not visible" error occurring specifically for one element within the popup

Error Message: "Element Not Visible" when Script Reaches Last Element Despite all attributes being in the same form, an error occurs when the script reaches the last element and displays "element not visible." All elements are enclosed in div tags on the ...

javascriptjqueryhtmlcssselenium

What steps are involved in integrating QuickBlox on your website?

I am completely new to web development and have a question about integrating QuickBlox into my website using JavaScript. I have included the necessary JavaScript files in my website and set up the QuickBlox admin application, but I'm not sure how to p ...

javascriptphphtmlapiquickblox

Contrasting float-start and start-0 characteristics

I'm attempting to recreate the layout shown in this image using HTML and Bootstrap 5: https://i.sstatic.net/R6Naf.jpg I'm having trouble with the alignment of the elements. When I use float-start for the image, it aligns properly, but start-0 do ...

htmlpositionbootstrap-5card

Issue with margin-top in combination with clear:both does not function as expected

<div style="float: left;">Left</div> <div style="float: right;">Right</div> <div style="clear: both; margin-top: 200px;">Main Data</div> What is causing the margin-top property to not work as expected for 'Main Dat ...

csscss-float

Is the accept attribute of the input not recognizing application/json as a valid input type?

My application allows users to upload files, including JSON files. While most browsers recognize file extensions specified in the accept attribute of the input element, Safari may not always behave as expected. In cases where MIME types need to be used, sp ...

htmljson

Issues with AngularJS radio button functionality

Hey there, I am currently using AngularJS in my project. However, when I attempted to add a span to one of my input fields, all the radio buttons related to it stopped functioning. Can anyone offer some suggestions on what might be going wrong here? < ...

javascriptjqueryhtmlangularjsdjango

Flip an image by analyzing the colors beneath it

Looking for a way to invert the color of specific areas under a mask (PNG) for a floating menu. Rather than inverting all at once, I want only certain parts to be inverted underneath the mask. Is this achievable, or is there another approach I should consi ...

javascriptjquerycsshtml

The value property of the input element is returning as undefined

The input value entered is always returning undefined. Despite trying various solutions found in similar questions, my jQuery code continues to return undefined. jQuery: $( document ).ready(function() { $('#Input').keypress( function(e ...

jqueryhtmlcss

Is JavaScript asynchronous when it comes to manipulating the DOM?

While conducting Javascript tests on the Android browser, I monitored the number of instruction counts executed on the CPU. The test code for JS is straightforward and embedded within HTML files located in the local directory of an Android device, not on a ...

javascripthtmlasynchronous

Using Javascript within PHP

Below is the HTML and Javascript code I am working with: <noscript> <div id="player"> <h2>Warning! You should enable your JavaScript!</h2> </div> </noscript> <script type="text/javascript"> var vid ...

phpjavascripthtmlif-statement

Enhancing the appearance of forms on Wordpress using ninja forms styling techniques

Seeking assistance in styling a form. After attempting CSS modifications, the form still lacks a background color. Can anyone provide guidance? #nf-form-8-cont { background-color: rgb(214, 214, 194,0.5); padding: 15px; box-shadow: 0px 3p ...

csswordpressformsbrowserstyles

adjust the div's position based on the window's scrolling bars

Is there a way to make my div move down when the window scrolls down and up when the window scrolls up? How can I achieve this effect? ...

htmlcsspositioning

Issues with multikeypress functionality in Javascript causing performance hiccups

Is it possible for this code to take two inputs directly from the browser window? If I press q, then 4000 should be incremented by 1. Similarly, if I press w, then 3000 should be incremented by 1. When both keys are pressed at the same time, both numbers s ...

javascripthtmlcss

The res.write function seems to be malfunctioning as it is displaying the output with HTML tags included

My endeavors in developing a web application using API's and express are met with unexpected results. The output I receive includes text mixed with HTML tags. Take a look at my code: const express = require('express'); const https = requir ...

javascripthtmlnode.jsexpresshttpwebresponse

The background size of each list item is determined by the size of the item

I'm trying to create a menu using an unordered list, where each item has a background color. However, I want the width of each item to be smaller than the list itself and aligned to the right. Any ideas on how to achieve this? Here is the HTML code: ...

htmlcsslistbackground-coloritems

Issues arise with the functionality of Zurb Foundation 5 tabs

Utilizing the tabs feature in ZURB Foundation 5, I've noticed that clicking on a tab changes the hash in the URL. However, I actually want to prevent this behavior as I rely on the hash for managing page loads. Although I attempted to use preventDef ...

javascriptjqueryhtmlcsszurb-foundation-5

What is the best way for Selenium in C# to identify and locate a specific span element by its value

I've been experimenting with different locators, but I'm struggling to find a straightforward solution for identifying the dynamic number within this span using C# Selenium. Initially, my focus is just on locating the span itself. <span inven ...

c#cssseleniumcss-selectorsui-automation