What is the best way to emphasize a label upon clicking a radio button?

I am trying to update the label of a radio button when it is clicked, but I have been unsuccessful so far. I came across this answer which seemed promising, but it did not work for me. Here is my code:

HTML

<div class="same-line">
    <input type="checkbox" name="417-jornadas-de-g%c3%a9nero-sin-fecha-confirmada" value="Sí" class="checkbox">
    <label class="checkbox">
    Jornadas de género (sin fecha confirmada)</label>
    <div class="clear-form"></div>
</div> 
<div class="same-line">
    <input type="checkbox" name="417-curso-de-fotograf%c3%ada-sin-fecha-confirmada" value="Sí" class="checkbox">
    <label class="checkbox">
    Curso de fotografía (sin fecha confirmada)</label>
    <div class="clear-form"></div>
</div>

CSS

.same-line input[type='radio'] {
    display:none;
}

.same-line label[class='checkbox'] {
    display:inline-block;
        font-size: 12.2pt;
}

.same-line input[type='radio']:checked + label[class='checkbox'] { 
   background-color: #FFBF00 !important;
}

Looking for any insights or suggestions!

htmlcss

Answer №2

Markup:

(I've made enhancements by adding id attributes to the checkboxes and for attributes to the labels)

<div class="same-line">
    <input type="checkbox" name="417-jornadas-de-g%c3%a9nero-sin-fecha-confirmada" id="cb1" value="Sí" class="checkbox">
    <label class="checkbox" for="cb1">
    Jornadas de género (sin fecha confirmada)</label>
    <div class="clear-form"></div>
</div>
<div class="same-line">
    <input type="checkbox" name="417-curso-de-fotograf%c3%ada-sin-fecha-confirmada" id="cb2" value="Sí" class="checkbox">
    <label class="checkbox" for="cb2">
    Curso de fotografía (sin fecha confirmada)</label>
    <div class="clear-form"></div>
</div>

CSS Styles:

(I've updated the styling from "radio" to "checkbox")

.same-line input[type='checkbox'] {
    display:none;
}

.same-line label.checkbox {
    display:inline-block;
        font-size: 12.2pt;
}

.same-line input[type='checkbox']:checked + label.checkbox { 
   background-color: #FFBF00;
}

Interactive Example: Check out this live demo!

Answer №3

HTML:

<div class="same-line">
    <input type="checkbox" id="checkbox1" name="417-jornadas-de-g%c3%a9nero-sin-fecha-confirmada" value="Sí" class="checkbox">
    <label for="checkbox1">
    Jornadas de género (sin fecha confirmada)</label>
    <div class="clear-form"></div>
</div> 
<div class="same-line">
    <input type="checkbox" id="checkbox2" name="417-curso-de-fotograf%c3%ada-sin-fecha-confirmada" value="Sí" class="checkbox">
    <label for="checkbox2">
    Curso de fotografía (sin fecha confirmada)</label>
    <div class="clear-form"></div>
</div>

CSS:

.same-line input[type='checkbox'] {
    display:none;
}

.same-line label {
    display:inline-block;
        font-size: 12.2pt;
    background-color:#fff;
}

.same-line input[type='checkbox']:checked + label {
   background-color: #ddd;
}

jsFiddle: http://jsfiddle.net/heZBT/

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

What is the best way to bring up the keyboard on an iPhone when focusing an HTML text field?

Currently working on developing a web app for iPhone, and looking to implement a feature where a text field is automatically focused upon page load, prompting the keyboard to appear. Despite attempting the standard Javascript method: input.focus(); I see ...

javascriptiphonehtml

Radio boxes vanish in Safari when -webkit-perspective is applied

Check out this quick demonstration on Safari only: http://jsfiddle.net/2late2die/8AJnD/ If you remove the perspective style, all checkboxes will appear normal. When using -webkit-transform-style:preserve-3d, the checkboxes disappear. This issue seems to af ...

csswebkitsafaricss-transforms

The PHP code is experiencing issues on the enquiry/callback form, but it is functioning correctly on the contact form

I'm having trouble understanding why I am only getting the telephone number and missing the name and email fields when submitting a form. I have tried making changes, but I can't get all three fields to work properly. <aside clas ...

phphtml

How to position button text below GlyphIcon in Bootstrap 3

Is there a way to align text underneath the icon in Bootstrap 3 buttons with a GlyphIcon? <div class="btn-group"> <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-file"></span>Archive</ ...

cssbuttontwitter-bootstrap-3glyphicons

Understanding the Importance of CSS Specificity in Resolving Selector Conflicts

I need help with a specific pseudo-class selector issue. Even with !important, the text in the li:first-child element is not appearing in blue. The selector specificity for p is: (0, 0, 1) The selector specificity for li:first-child is: (0, 1, 1) I want ...

htmlcsscss-selectorscss-specificity

Why did the creators choose to integrate a dropdown menu into Twitter Bootstrap?

While exploring Twitter's Bootstrap framework, I couldn't help but be impressed. However, one feature that has left me a bit puzzled is the dropdown navigation menu. First of all, to view child links, you need to click on the parent. I understan ...

jqueryhtmltwitter-bootstrapsemantic-markup

Prevent the influence of other page styles on a div element

My question involves a browser extension that inserts a div element (along with others) into the page. Is there a method to prevent the page's styles from impacting the appearance of the elements I've added? One option I've thought about is ...

css

The primefaces remoteCommand tag is failing to function properly as it is unable to pass the HTML content of the current page using jQuery to the managed

Utilizing Jquery's .html() method, I am extracting the HTML of my current page in the following manner. <h:outputScript name="js/jquery-1.7.2.js" /> <h:outputScript> function fetchHtml(){ $('#next').click(function(){ ...

javajqueryhtmljsf-2

What are the best practices for effectively utilizing Media Queries?

Currently, I am in the process of developing 3 HTML5 responsive websites that will need to be optimized for various devices. So far, I have successfully implemented media queries for smaller devices such as 320px, 375px, 425px, 480px, 768px, and 1024px. H ...

htmlcssresponsive-designmedia-queries

Using MustacheJS to render nested JSON data with partials

I'm encountering an issue while attempting to display my nested JSON data using Mustache partials. The rendering stops at the second level and does not go any further. According to the definition, partials should allow for recursive rendering. Am I im ...

javascripthtmljsonmustachepartials

Issues have been encountered with the correct functioning of reactive form validation in Angular 6

I am seeking assistance with Angular 6 reactive form validation. I have done some research on the official Angular website. My goal is to validate my form and display different error messages for different errors. This is a snippet of my component code: ...

javascripthtmlangular

The slideToggle() function appears to be malfunctioning when sliding up or down, as it

Currently, I am in the process of creating a dropdown menu. However, I am facing an issue where the menu does not slide down or up smoothly when clicked. The animations seem to be delayed or non-existent. $('.menu-vertical .nav-menu > li'). ...

javascriptjqueryhtmlcssslidetoggle

Utilize both the width and max-width properties to effectively wrap text within JOptionPane

I'm not well-versed in HTML/CSS, so please bear with my limited knowledge. I'm currently developing a GUI where I need to display a message dialog in case of an error. The error message could be either short or lengthy. I've implemented the ...

javahtmlcssswingjoptionpane

Attain three images with precise dimensions using CSS

Having trouble fitting 3 images in the same row? The issue arises when the images have different sizes, causing everything to shift. Any advice on how to address this problem? Thank you. HTML: <div class="first-slot"> <di ...

cssbootstrap-4

Using jQuery to vertically center a div

When a vertical menu on my website is clicked, it pops out from the left side of the screen. The content inside is vertically centered using CSS transformations. While expanding to show sub-items, everything remains centered. However, there's an issue ...

javascriptjqueryhtmlcsscenter

Is there a simpler method to access the source element for an event?

I'm just starting to learn JavaScript and jQuery, and right now I have the following code in my HTML: <a id="tog_table0" href="javascript:toggle_table('#tog_table0', '#hideable_table0');">show</a> After that, I hav ...

javascriptjqueryhtmleventsdom

Keep the CSS Grid cell blank without explicitly defining the position of other elements

I am trying to have an icon with a specific class element positioned in the center in relation to the first row, while skipping a cell in the second row's first column. Is there a way to skip that cell without explicitly specifying the grid-column po ...

htmlcss

How can AngularJS utilize variables from an external JavaScript <script> file within an HTML document?

As someone unfamiliar with AngularJS, I have a simple inquiry regarding the subject. The code on my page begins by defining an app and controller: <script> var isisApp = angular.module('isisApp', []); isisApp.controller('Acco ...

javascripthtmlangularjs

Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

I have organized my stylesheets into separate modules for each include, and I am trying to dynamically load them. However, I am facing some difficulties as when they are rendered, all I see is the following markup for each sheet that should be loaded: < ...

htmlcssangularjsheaderangularjs-ng-repeat

Can JavaScript executed within a web browser have the capability to manipulate files on the underlying host system's file system?

Is it possible to programmatically move files or folders from a website using code? I am aware that with Python and Node.js, this can be achieved through the OS, path, and fs modules. Can JavaScript running in a website also handle file management tasks ...

javascripthtmlcss