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

Centering text underneath bootstrap image design

After trying various methods, I still couldn't get the text to display directly below my images in the center. Below is the code I attempted: <div class="our_partners"> <div class="container"> <div class="row"> ...

htmlcsstwitter-bootstrap

Rotating and scaling an image simultaneously using CSS3

I am feeling very puzzled. Why am I unable to simultaneously scale and rotate? Despite my attempts, it seems to be not working: .rotate-img{ -webkit-transform:scale(2,2); -webkit-transform:rotate(90deg); margin-left:20%; margin-top:10%; } ...

javascriptjquerycsscss-transforms

Arrange radio buttons vertically in a table

I am attempting to display a vertical list of radio buttons within a table cell. Is this achievable? Here is the code snippet I am currently working with: <table> <tr> <td> First Name </td> ...

htmlcssradio-button

What are some methods for converting data from data tables into alternative formats?

I need assistance exporting data from data tables in various formats such as Copy, CSV, Excel, PDF, and Print. Can someone show me how to do this for the example provided below? <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4 ...

jqueryhtml

In what ways can the current theme be utilized to optimize spacing?

Greetings everyone, I need assistance with adding margins above and below a Button element. Below is the relevant code snippet: const useStyles = makeStyles(() => ({ progress: { display: 'block', margin: 'auto', }, })); ...

cssreactjsmaterial-ui

Exploring intricate binding expressions using IF statements in ASP.NET

I am trying to create an expression for a column in my repeater, but I am not confident about the syntax. My goal is to display "No Document" if the value is equal to "DispForm.aspx", otherwise show the actual value. I attempted to combine all expression ...

c#htmlasp.netwebforms

Conceal the div using a sliding left animation

After researching extensively, I have been unable to find a solution to my problem. In order to better illustrate my issue, here is the code for reference: jsfiddle I am looking to create a sliding effect for a calc div where it moves to the left, simila ...

jquerycss

Enhance your CSS link in Yii framework 2.0 by incorporating media printing capabilities

While working on Yii framework 2.0, I typically include a CSS file by adding the following code snippet to assets/AppAsset.php: public $css = [ 'css/style.css', ]; Upon inspecting the element in the web browser, I notice the following code ...

cssattributesmediayii2

Tips for evaluating style modifications on mouseover using cypress

Trying to test hover styles on table rows but encountering issues: Here is the code snippet I am testing: it("Table rows should display correct hover styles", () => { cy.get("table>tbody>tr").each(($el, index, $list) =&g ...

htmlcsscypresse2e-testing

Having trouble getting the Bootstrap toggle checkbox to function properly within Angular 2 components?

Working on an Angular 2 project with Bootstrap, I recently tried to integrate a bootstrap-toggle checkbox into the UI. Despite following the instructions from this site, the checkbox was displayed as a normal checkbox instead of toggled. The Index.html cod ...

jqueryhtmltwitter-bootstrapangular

Is there a way to pass locale data using props in VueJS Router?

To access hotel data, the URL path should be localhost:8080/hotel/:id (where id is equal to json.hoteID). For example, localhost:8080/hotel/101 This path should display the specific data for that hotel. In order to achieve this, we will utilize VueJS vu ...

javascripthtmlcssvue.jsvue-router

Searching for a column fails to yield any results after altering the value in

Here is a snippet of code that I am working with: <!DOCTYPE HTML> <html lang="en"> <head> <title> Exact matches overview </title> <script type="text/javascript" src="/static/s ...

javascriptjqueryhtmldatatables

Why is my jQuery not selecting the classes from this iframe?

I'm attempting to retrieve all classes with the name "titular_portada". There are many, but for some reason it's not functioning: <!DOCTYPE html> <html lang="es"> <head> <link rel="stylesheet" href=&q ...

htmljqueryiframe

What could be the reason for my MVC 5 ASP.Net application functioning perfectly on my local machine but encountering issues when deployed to Azure

Looking for some help with my first question here. I've recently completed a small ASP.Net project focused on racing drivers and teams, which works well locally but encounters issues when deployed to Azure. The first problem I've encountered is ...

cssazureasp.net-mvc-5web-configvisual-studio-2015

What is the best method for adding space between elements in flexbox layout?

I am struggling to align the child flexboxes within my parent flexbox in a single row, both vertically and horizontally centered. I want to add space between them using the gap property in CSS, but the images and embedded videos inside these child flexboxe ...

htmlcssflexbox

Sending checkbox selections to JavaScript

I am currently exploring Angular by working on a chat application project. My main focus right now is on passing checkbox values to my JS code. I have included snippets of the code below. The issue I'm encountering is that I can't seem to retriev ...

javascripthtmlangularjs

conceal a targeted section from the bottom of the iframe

I have a website embedded inside an iframe for use in a webview application. <body> <iframe id="iframe" src="http://www.medicamall.com"></iframe> </body> This is the CSS code: body { margin:0; padding:0; height:10 ...

javascriptjqueryhtmlcssiframe

Show the extracted data on the following web page once it has been cleaned

I am looking to connect a python file with an HTML page using Flask application. On the first page (upload.html), the user is required to select the job field and job title from two dropdown menus. Afterwards, the user needs to upload a file containing a l ...

pythonhtmlpandasflask

Prevent automatic jumping to input fields

Can someone help me with a problem related to the html input tag or primefaces p:input? I am facing an issue where the cursor always automatically jumps into the input field. The height of my page is such that scrolling is required, and the input field i ...

javascripthtmlprimefaces

Clever method for enabling image uploads upon image selection without needing to click an upload button using JQuery

Is there a way to automatically upload the file without having to click the upload button? Detail : The code below shows an input field for uploading an image, where you have to select the file and then click the "Upload" button to actually upload it: & ...

javascriptphpjqueryhtmlcss