CSS Selector for when a radio button is selected

I'm currently using images in place of radio buttons:

<label class="radio-inline thumbs"><input type="radio" id="type_nee" name="type" value="nee" onkeyup="validate()" onclick="validate()"> <img src="assets/images/basis.png"  height="75"> </label>
<label class="radio-inline thumbs"><input type="radio" id="type_ja" name="type" value="ja" onkeyup="validate()" onclick="validate()"> <img src="assets/images/bottom.png" height="75"> </label>

The radio button is hidden using the following CSS:

   input[type=radio]:not(old){
      width   : 28px;
      margin  : 0;
      padding : 0;
      opacity : 0;
    }

To make the image transparent, this CSS is used:

.thumbs{opacity:0.5;}

I want to remove the opacity when the image (radio button) is clicked. What CSS selector should I use? I have already tried

.thumbs:active{opacity:1;}

and

.thumbs:checked{opacity:1;}

However, these attempts did not work. Any suggestions on how to remove the opacity filter when the image (radio button) is checked?

htmlcss

Answer №1

Here is an example to update your HTML and CSS:

input[type=radio]:not(old){
   width   : 28px;
   margin  : 0;
   padding : 0;
   opacity : 0;
}

.thumbs{opacity:0.5;}

.testchecked:checked + label > img {opacity:1;}
<input type="radio" id="type_nee" class="testchecked" name="type" value="nee">
<label for="type_nee" class="radio-inline">
  <img class="thumbs" src="assets/images/basis.png"  height="75">
</label>

<input type="radio" id="type_ja" class="testchecked" name="type" value="ja">
<label for="type_ja" class="radio-inline">
  <img class="thumbs" src="assets/images/bottom.png" height="75"></label>

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

Dynamic video autoplay with a hover effect using Bootstrap 3

I am looking to create a hovering effect on an autoloop video similar to what is seen on this website - This specific section of the website demonstrates the effect I am trying to achieve. Prior to hovering, the autoloop video has an overlay displayed on ...

htmlcsstwitter-bootstrap

Exploring the possibilities of NodeJs by analyzing an HTML form

I'm facing an issue while evaluating an HTML Form using NodeJs and Express. Here's my JavaScript Code My aim is to manage HTML Forms in NodeJs using Express. const express = require('express'); const http = require('http'); ...

htmlnode.jsexpress

The wrap() method in jQuery clones elements multiple times

I have created a simple function that wraps a div tag inside another div tag when the browser window exceeds a certain width of x pixels. However, I've encountered a strange bug when resizing the page more than once. Let me share with you the jQuery ...

javascriptjqueryhtml

Using identical CSS for two separate layouts

Imagine having to work with an html page that cannot be altered in any way. The only tool at your disposal is CSS. The page is loaded and shown through an iframe from a different domain. This particular page serves as a payment gateway, displaying either ...

htmlcss

Encountering difficulties including Bootstrap in React-app after attempting global installation

After using the command npm i -g bootstrap to install bootstrap, I attempted to include it in a React-app by adding import "bootstrap/dist/css/bootstrap.css";. Unfortunately, this resulted in an error being thrown. Failed to compile. ./src/index.js Modu ...

cssreactjstwitter-bootstrapnpmnpm-install

Need help styling a CSS for an iFrame on the same domain as my website?

After doing some research and browsing through Stack Overflow questions, I've discovered that even if you don't have access to the iFrame's stylesheet, you can still make edits as long as it resides in the same domain as your webpage where y ...

htmlcssiframe

Switching the horizontal tab design from Bootstrap 3 to Bootstrap 4

I'm currently working on adapting a code snippet from bootsnip that creates horizontal Bootstrap tabs with material-style design. I've encountered some challenges in converting it to Bootstrap 4, specifically in updating the CSS to use .nav-item ...

htmlcsstwitter-bootstrap-3bootstrap-4twitter-bootstrap-4

"Streamlining data entry with an uncomplicated HTML form input that accepts multiple values from a

As I understand it, a barcode scanner functions as nothing more than a keyboard that transmits keycode 13 after each scan. My task is straightforward: I have a basic form with only one input field and I want the ability to scan numerous barcodes and then c ...

javascriptphpjqueryhtmlforms

Guide to Aligning col-md-3 to the Right Side in HTML Bootstrap 4

Is there a way to align one div on the right side, but within the same row? I am trying to place the value 172.21 on the right side of the row. Check out the screenshot here: https://i.sstatic.net/eg3K5.png Here is the HTML: <div class="row" ...

htmlcssbootstrap-4

Issue with image preview functionality in dialog modal when loading content via ajax request

<table id="result"> <a href='#' class='pop'><span class='fa fa-eye'><img src='image link here' style='display:none'></a> </table> The hyperlink above is designed to open ...

phphtmlajax

Contrasting border with border-style

To eliminate all borders from my primefaces panelgrid component, I employ the following techniques: First method: .table, table td { border-style: hidden !important; } Second method: .table, table tr, table td { border: none !important; } Can ...

cssprimefaces

The div is incorrect and causing the label and input to move in the wrong direction

Whenever I try to adjust the position of the current-grade-name-input, the entire grade-point-input moves along with it inexplicably. /* final grade calculator: (wanted-grade - (current-grade * (1 - final%))) / final% Ex: have a 80 an ...

javascripthtmlcss

jQuery text alignment breaking bug

I am attempting to create an overlay for a couple of my divs to prevent users from progressing without completing previous tasks. The overlay is functioning correctly and the message is displaying, but I encounter issues when trying to center the message. ...

jquerycss

What is the best way to translate these CSS properties into Mui?

I am currently in the process of transitioning my CSS code to utilize MUI's sx prop and styled() function. However, I have not been able to find any documentation on how to properly convert the following code to MUI syntax. Can someone assist me with ...

htmlcssreactjsmaterial-ui

I am attempting to separate this "for" loop in order to generate five distinct DIV elements

Hello there! I am a beginner and I am attempting to create 5 different players by using some code that I found. Here is the code I have been working with: https://codepen.io/katzkode/pen/ZbxYYG My goal is to divide the loop below into 5 separate divs for ...

javascriptjqueryhtmlcss

Create a rectangular container with text using CSS

Looking to achieve a square box design using CSS with specific dimensions? Want to insert text inside the square and ensure it is horizontally centered within the square? Check out this code snippet: #myid { width: 100px; height: 100px; ...

htmlcss

A guide to creating gradient borders using CSS

Does anyone have advice on applying a gradient to a border in CSS? I attempted using the following code: border-color: -moz-linear-gradient(top, #555555, #111111); Unfortunately, it did not work as expected. Can someone share the correct method for creat ...

cssbordergradientlinear-gradients

Tips for placing multiple images onto one canvas

I am currently working on a web application that allows users to create sketches, define their positions and sizes, and then save them to a database. In another section of the website, I aim to retrieve these images and display them on a single canvas. To ...

javascripthtmlimagecanvasdraw

Is there a way to update my profile picture without having to constantly refresh the page after uploading it?

Here is the code for my profile page. I am considering using a callback along with another useEffect function, but I'm unsure. Please help me in finding a solution. For now, let's ignore all the code related to deleting, saving, and handling ingr ...

javascripthtmlreactjsnpmreact-hooks

Extracting content from HTML-formatted email

When I receive inbound emails with HTML formatting that has been copied and pasted from office applications like Outlook, it often causes formatting issues when displayed on my HTML enabled UI. To address this problem, I usually copy the HTML content to an ...

c#htmlcssasp.nethtml-parsing