Changing text based on user input by utilizing CSS when a Radiobutton is selected

I am facing a small issue that I can't seem to solve. I want the text to always be displayed in bold with a font-weight of 700, but when one of the radio buttons is clicked, I need the font-weight to reduce to 300.
Is there a way to achieve this effect using only CSS and without JavaScript?

Here is the code snippet I have:

#content{
      color: #333;
  font-weight: 700;
}

.radio_item_menu:checked + #content {
  font-weight: 300;
}
<input type="radio" name="navbar_menu_store" id="input_description" class="radio_item_menu">
<label for="input_description" class="label_item_menu">Description</label>
<input type="radio" name="navbar_menu_store" id="input_shipping" class="radio_item_menu">
<label for="input_shipping" class="label_item_menu">Shipping</label>

<div id="content"><p class="testo_scheda">
This is some text</p>
</div>

I have tried implementing it but the font weight does not change when I select the radio buttons. Link to my code Thank you!

htmlcssfrontendradio-button

Answer №1

Instead of using the + selector, consider utilizing the ~ selector:

#content {
  color: #333;
  font-weight: 700;
}

.radio_item_menu:checked~#content {
  font-weight: 300;
  color: red;
}
<input type="radio" name="navbar_menu_store" id="input_description" class="radio_item_menu">
<label for="input_description" class="label_item_menu">Description</label>
<input type="radio" name="navbar_menu_store" id="input_shipping" class="radio_item_menu">
<label for="input_shipping" class="label_item_menu">Shipping</label>

<div id="content">
  <p class="testo_scheda">
    This is some text</p>
</div>

The ~ selector targets a general sibling element, unlike the + selector which focuses on an adjacent sibling element that #content is not.

To learn more about CSS selectors, explore resources like this one and that one.

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

Material design for Angular applications - Angular Material is

Recently, I decided to explore the world of Angular and its accompanying libraries - angular-material, angular-aria, and angular-animate. I'm eager to experiment with this new styling technique, but it seems like I've hit a roadblock right at the ...

javascripthtmlcssmaterial-designangular-material

Troubleshooting a Problem with CSS Div Multi-column Formatting

I have designed a multi-column div that displays correctly in Firefox but has formatting issues in Chrome and IE. In Firefox, the three columns appear properly with the frame of the last item in column one ending correctly. However, in Chrome and IE, the f ...

htmlcssgoogle-chromeinternet-explorer

Prevent the top of the page from being displayed when revealing an Absolute DIV

In my design, there is an absolute positioned DIV with a significant top CSS value. Initially, this DIV is hidden and only revealed by slideToggle (jQuery) when a specific button is pressed. This functionality works perfectly for DIVs located at the top of ...

javascriptjquerycss

Modify SQL table to alter the timestamp value

I am currently utilizing PHP to showcase an SQL table. Once a user selects a row on the table and clicks a button, I aim for it to update the timestamp to the present time and reflect on the displayed table within the webpage. The SQL query that I have wor ...

javascriptphpjqueryhtmlmysql

Elements positioned absolutely using the ::after and ::before pseudo-elements do not adhere to the very bottom of the body

Feeling a bit crazy right now! Haha. I'm facing a challenge in positioning an image at the bottom of a webpage. It seems to work fine when the page width is larger, around 1360px, but as soon as I shrink it to 1206px or less, the image gets pushed up, ...

htmlcssbootstrap-5

Ways to initiate JavaScript event upon clearing input form field

I'm working on creating a dynamic search feature. As the user types in the search box, JavaScript is triggered to hide the blog posts (#home) and display search results instead (the specific script for this is not shown below). However, when the user ...

javascripthtml

How do I handle a Flask request from an HTML form that is returning a None value?

I am unable to retrieve the value on request in my Flask application. Instead of the expected value, it is returning None. Despite trying to change the method, I am still facing this issue. Here is the Flask code snippet: @app.route("/login/user/book") ...

pythonhtmlflaskbootstrap-4jinja2

The importance of color value is underscored

Is there a way to remove the surrounding color from the value in Visual Studio Code and only display the little square on the left side? [.nav-link-wrapper a { color: #ec0b0b } ] https://i.stack.imgur.com/5uA9k.png ...

cssvisual-studio-codecolors

What's the reason for switching from a custom tab icon to a React icon?

I've encountered a strange issue while working on my app - the tab icon keeps changing from the one I've set to the ReactJS icon whenever I navigate between different routes. I have linked the icon correctly in my HTML file, so I'm not sure ...

javascripthtmlvue.jsvuejs2

Shifting HTML table in Javascript by toggling checkboxes

When I click the checkbox, the table elements are not displaying inline. I am simply hiding the class "box". Do I need to write a special format? By default, the elements are displayed inline but when I check the checkbox, they shift. The column 'Stat ...

javascripthtmljquerycss

How come my justify-content property isn't functioning properly with Flexbox?

I've been racking my brain trying to solve this. The goal is to have all the boxes neatly grouped together, but for some reason there's a massive gap between the main content and footer. Could someone lend a hand? CSS Below is the CSS code rele ...

htmlcssflexbox

The JQuery loading symbol does not prevent keyboard interactions

I successfully implemented a Jquery busy indicator in my application using the following link: However, I noticed that even though it prevents users from clicking on input elements while loading, I can still navigate to these elements by pressing the tab ...

javascriptjqueryhtmlcssangularjs

The customary scroll bar located to the right side of the screen

I'm struggling to create a common scrollbar for both the left navigation div and right content div on a simple page, but all my attempts have failed. No matter what I try, the scrollbar only works for the content div. Is there any way to make them sha ...

htmlcss

Dynamic resizing of grids using React and TypeScript

I'm attempting to create a dynamic grid resizing functionality in React and TypeScript by adjusting the lgEditorSize value on onClick action. Setting the initial lgEditorSize value const size: any = {}; size.lgEditorSize = 6; Adjusting the lgEditorS ...

javascriptcssreactjstypescriptbootstrap-4

How can flexbox ensure that the width won't shrink?

When I set a fixed width for my 'left box', the width shrinks if the content on the right is too long. How can I prevent this from happening? .flex { display: flex; } .left { width: 10px; height: 10px; border: 1px solid; } .right { ...

htmlcssflexbox

When attempting to retrieve the value of my select element, I encounter difficulty due to a hidden field that only becomes visible when a certain option is selected

I have a dropdown menu with different options, including one labeled "other". When the user selects "other", a hidden text field appears for them to enter a custom value. This functionality works correctly. However, if the user selects any other option and ...

javascriptjqueryhtmlforms

Is there a way to retrieve JavaScript variables within JSP files?

What is the best way to interact with Javascript variables within JSP code? ...

javascripthtmljsp

CSS: Centralize content and use a div to hide images that overflow the container

I successfully centered my divs and images both horizontally and vertically using CSS: .center { height: 100% } .center-center { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); text-align: center; ...

htmlcssoverflowcenter

Dragging and dropping elements onto the screen is causing them to overlap when trying

I am having trouble merging the drag and drop functionality from Angular Material with resizing in a table. Currently, both features are conflicting and overlapping each other. What I am hoping for is to automatically cancel resizing once drag and drop s ...

cssangulartypescriptangular-materialangular9

Sharing information between different components in React can be done using props, context, or a

When attempting to edit by clicking, the parent information is taken instead of creating a new VI. I was able to achieve this with angular dialog but I am unsure how to do it with components. This is done using dialog: <div class="dropdown-menu-item" ...

htmlcssangulartypescript