Ways to display or conceal text based on chosen options from a select box without using javascript

Is there a way to display different text based on selection from a dropdown menu without using javascript?

I attempted the code below, but it still relies on the onchange event.

<div>
    <select onchange="if(selectedIndex!=0)document.getElementById('t').innerHTML=options[selectedIndex].value;">
          <option value="">&lt; select an option &gt;</option>
          <option value="term 1">term 1</option>
          <option value="term 2">term 2</option>
          <option value="term 3">term 3</option>
    </select>
</div>
<div id="t"></div>

I am seeking assistance in achieving the same functionality without relying on javascript. Your help is greatly appreciated.

Thank you

Answer №1

Regrettably, achieving this task will prove to be quite challenging and may not even be feasible with the current CSS 3 and HTML 5 standards.

However, by utilizing pseudo selectors and elements, you can implement the checkbox hack.

The implementation of the checked tag also extends to <option> elements within <select>.

Using such selectors allows you to hide the selected element from the <select> using code similar to that found in this StackOverflow response.

The challenge arises when attempting to select specific elements like #t from your example. Due to limitations in the selector specifications, it is currently not possible to target the parent of an element directly. For any updates on this feature, refer to this StackOverflow post. Therefore, as of February 2020, accomplishing this task solely through CSS would require implementing JavaScript, rendering the current method ineffective.

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

I am creating an HTML page that incorporates p5.js, and the text I'm rendering

It seems like the draw loop is continuously refreshing every x seconds, causing this behavior. Is there a way to slow down or disable the frame update without affecting the video refresh rate? I was thinking of adding an fps counter and implementing an i ...

Obtain the context within the image loading function

I am working with an array of Image objects: let imageArray = []; ... imageArray[i].onload = function () { ... } When the onload function is triggered, I need to determine which specific Image object it is referring to. Is there a method to achieve ...

Determine browser compatibility by evaluating the DOM Level

Can we easily determine which browser versions and above are compatible with a certain DOM level? ...

Component is unable to access global styles

Component utilizing global styles Global styles are specific to this component only, such as col-lg-2, col-md-4 -> global style import React from 'react' import ReactDOM from 'react-dom' import { AppContainer } from 'react-hot ...

"960-css: Building a Unique Framework for Sty

Considering the 960 gs CSS framework for implementation on my website. Is there any notable company utilizing this framework for their websites? Appreciate any insights. ...

What is the best way to make changes to the DOM when the state undergoes a

I've programmed the box container to adjust dynamically based on input changes. For instance, if I entered 1, it will generate one box. However, if I modify the input to 2, it mistakenly creates 3 boxes instead of just 2. import React from 'rea ...

Issue with Phonegap: layout distortion occurs when keyboard is displayed

Having trouble with the UI when the keyboard is active. Elements with a position: fixed style seem to scroll along with the content when the keyboard is open. Any solutions to fix this issue? This problem occurs specifically in iOS versions 6.1 and 7.1. ...

Are numerous h1 tags allowed?

Many debates have arisen regarding the use of multiple h1 tags on a single web page. What if additional semantic meaning is provided using hgroup, article, header, footer, and section tags? Despite numerous discussions, a definitive answer remains elusiv ...

Having trouble retrieving the complete URL on the Login Page within Shopify

I've been working on a feature where users are redirected to different URLs based on the page they click the login button on. For example, I have a registration page and a regular page, both with a login button. When a user clicks the login button on ...

Template for Joomla with a white stripe running along the right side

When I resize my browser to be half the width of my screen at www.thames.ikas.sk, a white stripe appears on the right side. Why is this happening? Why aren't my html and body elements taking up the full width of the browser? This issue doesn't oc ...

Webstorm encounters difficulties compiling Sass

While attempting to utilize Sass in the Webstorm IDE, I noticed that it is defaulting to Ruby 1.8 (OS Default) instead of my preferred RVM Ruby Version (1.9.x). To address this issue, I tried setting the path for Sass in the Watcher-Configuration: PATH=$ ...

Make sure that the two rows in my Bootstrap table are consistently positioned next to each other, regardless of the length of the text

When working with a Bootstrap panel containing text inside a table, I've encountered a challenge. One side features links while the other displays descriptions. At times, I find myself having to artificially lengthen the text to ensure it aligns corre ...

Is it possible to upload files without using AJAX and instead through synchronous drag-and-drop functionality in the foreground?

Currently, my website has a standard <input type="file"> file upload feature that sends data to the backend upon form submission. I am looking to enhance the functionality of the form by allowing users to drag and drop files from anywhere within the ...

Unable to scroll to top using div scrollTop() function

Here's the fiddle I mentioned: http://jsfiddle.net/TLkmK/ <div class="test" style="height:100px;width:70px;overflow:auto"> Some text here that needs scrolling. </div> alert($('.test').scrollTop()); Feel free to scroll down ...

What methods can I use to customize the appearance of the acceptance label in a contact form created with

I am currently developing a WordPress website using the Contact Form 7 plugin. However, I am facing an issue with styling the "I accept" button and text when clicking on the "registrace" button. I would like to center them and create some proper margin aro ...

Unable to show the name of the chosen file

After customizing the input [type = file], I successfully transformed it into a button with a vibrant green background. Here is the code snippet that enabled this transformation: <style> #file { height:0px; opacity:0; } ...

unable to reset contact form functionality

I need to implement a Contact Us form on my website. The form should clear the text fields after submission and display a Thank You message. Below is the HTML code: <div class="form"> <div id="sendmessage">Your message has been sent. Thank yo ...

Issue with Laravel: Scripts and image sources are not functioning properly in layouts when utilizing URLs with prefixes

Path Route::group(array('before' => 'guest'), function() { // landing page Route::get('/', array('uses' => 'HomeController@home', 'as' => 'home')); Route::get(&apo ...

Secret message concealed within the depths of my Bootstrap 5 Side Navbar

I have successfully created a side NavBar using Bootstrap 5, but I'm facing an issue where my text is getting hidden behind the navbar. Any suggestions on how I can resolve this? Below is the code for my side Navbar: const Navbar = ({ handleClick, is ...

Is there a way to use ajax to dynamically monitor the presence of a file in real-time?

Is there a way to automatically observe the status of a file using ajax without having to manually refresh it with a button? ...