Display the element only when the input is in a selected state using CSS

Looking for a way to display an element when an input field is selected without using JavaScript? Preferably, the solution should not involve placing the element within the input field. Unfortunately, targeting the element in CSS with the :active selector doesn't work as expected.

Currently, the structure is like this:

<div class="outer">
  <input type="text" name="field" />
  <div class="element"></div>
</div>

Is it possible to target a parent element after :active using the :root selector or something similar?

The existing CSS code:

.element {
  display: none;
}

.outer:active .element {
  display: block;
}

While this works, the element is only displayed when clicking and holding anywhere within the outer element, which is not ideal. I don't want to rely on :hover either. Open to suggestions!

htmlcss

Answer №1

Check out this demo - here

.element {
  display: none;
}
input:focus ~ .element {
  display: block;
}
<div class="outer">
  <input type="text" name="field" />
  <div class="element">hello</div>
</div>

Answer №2

Here is a helpful code snippet for showing the immediate next div when an input element inside the "outer" element is focused.

.element {
  display: none;
}

.outer input:focus + .element {
  display: block;
}
<div class="outer">
  <input type="text" name="field" />
  <div class="element">hello</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

Disabling an HTML attribute on a button prevents the ability to click on it

In my React application, I have a button component that looks like this: <button onClick={() =>alert('hi')} disabled={true}>test</button> When I removed the disabled attribute from the browser like so: <button disabled>test& ...

javascripthtmlreactjs

Update the background image to be smoother, with no text overlay

I am working on a website where I need to smoothly change between background images. Here is the JavaScript code I currently have: var bg=[ 'images/best.jpg', 'images/61182.jpg', 'images/bg.jpg' ...

javascripthtmlcss

Countdown Timer App using Flask

I'm currently working on a Flask-based game that involves countdown timers for each round. My goal is to have the timer decrease by 1 second every round without the need to reload the page. I've tried using time.sleep in my Python code to update ...

javascriptpythonhtmlflaskjsonify

Eliminate any excess space to the right of the image

Utilizing Bootstrap alongside React, I've encountered an issue with images causing unwanted whitespace to the right. I've thoroughly examined the elements but have been unable to resolve this issue. Despite researching Bootstrap Col online, the ...

htmlcssbootstrap-4react-bootstrap

Ways to position an image in the middle of a Div

I am currently working with PHP and Smarty, attempting to display a slideshow's images in the center of a specific div, but I am encountering difficulties achieving this. Below you will find the code snippet. Can anyone help me figure out what I migh ...

javascriptphpjqueryhtmlcss

Enhancing the functionality of hidden input fields using jQuery

I'm looking to dynamically update the value of a hidden input element when a button is clicked. Here's what I have so far: Hidden Input Element: <input type="hidden" value="action" id="action" /> Buttons: <INPUT name=submit value=~#S ...

javascriptjqueryhtml

Even when the dimensions are set to 100 width and height, the scroll bar still makes an

I recently embarked on my journey to learn web development by enrolling in a course on Udemy. Currently, I am diving into CSS3/HTML5 and have started a small project involving CSS3 - creating a web page that represents the Universe. My goal is to incorpora ...

htmlcssheightwidth

Creating a Form with Table-like Alignment Using Div Tags

Take a look at my code: <div> <label>First Name</label><input type="text" id='first_name'/><br /> <label>Last Name</label><input type="text" id='last_name'/><br /> <l ...

htmlcsscss-tables

How can I close the menu when a menu item is clicked in a React.js application?

I am facing an issue where I want to close the menu when clicking on any menu item in React JS. The functionality works fine with a button icon but not with individual menu items. How can I resolve this problem? I have been trying to implement it using CSS ...

javascriptcssreactjs

Managing the layout with React Native Flexbox to evenly distribute items

Check out this React Native Demo I put together featuring Santa images being added and removed in a Flexbox. Bunch of Santas I noticed that when there are more than 3 Santas, the layout shifts to the left. I'm curious about how to keep the Santas ce ...

javascriptcssreactjsreact-nativeflexbox

Can content projection be utilized from a child component in Angular?

Keep in mind, this example could be achieved without using content projection. I am just showing a simplified version here. Imagine having a component that displays lists of names in two separate elements: import { Component } from '@angular/core&ap ...

htmlangulartypescript

The file size exceeds the server's upload limit, despite making changes to the php.ini file

I've encountered a problem trying to upload an .OBJ file to the server, resulting in an 'Error 1' message. The uploaded file surpasses the upload_max_filesize directive specified in php.ini This error is detailed on this page - http://ph ...

javascriptphphtmlajaxfile-upload

How to Implement Full Height CSS for Child Elements?

How can I set the child containers "left" and "right" to be 100% height of the parent container, which is already at 100% height? Also, what's the best way to position the container "hexCont" horizontally? CSS: <style type="text/css"> html ...

csscss-position

Incorporate a unique element onto your WordPress homepage

I'm seeking guidance on how to incorporate a custom feature (including a textbox and a button) onto my WordPress homepage. My goal is to create an area where users can input a code into a textbox. Here's the challenging part: Once the user click ...

phphtmlwordpress

Is it possible to modify the font size of all text that shares a particular font size?

Lately, I've been pondering on a question. A few years ago, I created a website using regular CSS and now I want to make some changes to the font sizes. While I know that CSS variables are the recommended solution for this situation, I'm curious ...

javascripthtmljquerycsssass

Unleash the potential of a never-ending expansion for grid cells on Canvas

ts: templateStyle = { display: 'grid', 'grid-template-columns': 'calc(25%-10px) calc(25%-10px) calc(25%-10px) calc(25%-10px)', 'grid-template-rows': '150px auto auto', 'grid-gap ...

htmlcssangulartypescriptcanvas

Sending a PHP object as the value of an HTML radio button

When dealing with a custom object that needs to be passed as a form value in a radio button selection, the usual method involves invoking the toString() function on the object. However, this simply converts the object to a String, which may not be ideal fo ...

phphtmlforms

Ensuring uniform height of columns in Bootstrap

I want all columns following the first row with col-md-6 to have equal height, regardless of dynamic content (go to full page). <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" ...

htmlcsstwitter-bootstrapbootstrap-5

JQuery function within the "onclick" event

$('.more').click(function showFriendInfo(id) { $('#MoreFriendInfo'+id).toggle(); }); I created this function called showFriendInfo(id), but how can I properly link it in HTML/PHP to obtain the id? I attempted the following ...

jqueryhtml

Learn the steps to include an HTML checkbox in an AJAX HTML editor

I need help with adding an HTML checkbox to an Ajax HTML editor in ASP.NET. I have attempted to do this but am having trouble checking and unchecking it. Below is the code snippet that I have tried. Any suggestions would be greatly appreciated. webform.as ...

htmlasp.netajax