Locate the checkbox label using CSS

Is there a way to replace the standard checkboxes with font-awesome icons without modifying the generated HTML or using jQuery?

EDIT: The code includes JavaScript that prevents me from making changes. Also, note that the label text class can be -1 or -2 as well.

<table cellpadding="0" cellspacing="0" class="odincategory odincategory38 odincategory-even odincategory-placement2 odincategory-placement-even odincategory-multi" id="odincategory38-holder">
  <tbody>
    <tr>
      <td class="odincategorycheckcolumn">
        <input type="checkbox" name="odinanswer1" value="38" class="odincategorycheckmulti" id="odincategory38">
      </td>
      <td class="odincategorylabelcolumn">
        <table cellpadding="0" cellspacing="0" id="odincategorylabel38">
          <tbody>
            <tr>
              <td class="odincategorylabel">
                <label for="odincategory38"><span class="odinfontnumber-0">Choice<br>
                  </span></label>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td class="odincategorymarkcolumn"></td>
    </tr>
  </tbody>
</table>

htmlcsscheckboxcss-selectors

Answer №1

Unfortunately, achieving this with pure CSS is not possible. The main issue lies in the restrictions on selecting elements - you can only target adjacent, following, or descending elements. In your situation, the label is located elsewhere in the document hierarchy. If the label were located next to the checkbox, you could apply something like:

input[type=checkbox] + label {
  color: green;
} 
input[type=checkbox]:checked + label {
  color: red;
}

However, given the current structure of your code, this method will not yield the desired result.

Answer №2

Feel free to test out this sample code that alters the color of a label... You can customize it to suit your needs.

In this demo, I utilized a button to trigger the change in font color. However, you have the flexibility to create a specific function that adjusts the font style once the page has loaded

<table cellpadding="0" cellspacing="0" class="odincategory odincategory38 odincategory-even odincategory-placement2 odincategory-placement-even odincategory-multi" id="odincategory38-holder">
  <tbody>
    <tr>
      <td class="odincategorycheckcolumn">
        <input type="checkbox" name="odinanswer1" value="38" class="odincategorycheckmulti" id="odincategory38">
      </td>
      <td class="odincategorylabelcolumn">
        <table cellpadding="0" cellspacing="0" id="odincategorylabel38">
          <tbody>
            <tr>
              <td class="odincategorylabel">
                <label for="odincategory38" id="labelForodincategory38"><span class="odinfontnumber-0">Choice<br>
                  </span></label>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td class="odincategorymarkcolumn"></td>
    </tr>
  </tbody>
</table>

<input type="button" onclick="document.getElementById('labelForodincategory38').style.color='blue'" value="Click Me to Change Color" />

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 adjust the height of a Div to be 100%?

I've been struggling to make the .footer and the div .content have a height of 100%. While I know how to get the footer to stick at the bottom, I can't seem to make the content div reach the bottom of the page. Increasing the min-height on the co ...

jqueryhtmlcsswordpress

Learn the process of transferring data-target IDs to another JSP using Bootstrap

Currently, I am encountering an issue where I am trying to use bootstrap to display a dialog box by clicking on a button. The dialog box is created in HTML (.jsp) and the submit button is in another .jsp file. However, when I click on the button, instead o ...

htmlajaxtwitter-bootstrapjsptwitter-bootstrap-3

The directory structure does not align with the 301 redirect

I recently transitioned my website from HTML to a CMS platform. The new CMS does not include any file extensions in the URLs, so I have maintained the same URL structure from my old HTML site. Here is an example of the difference: HTML site URL: www.sit ...

phphtml.htaccesshttp-redirect

Is it feasible to have content wrap around a Grid-Item?

I've been experimenting with the new CSS Grids layout module to arrange my content. I have a set of paragraphs that are 8 columns wide, and I'm looking to insert a figure that spans 3 columns in columns 1-3. After that, I want the following parag ...

htmlcsscss-grid

Navigate to the element and retrieve a null offset

Currently, I am attempting to retrieve an element's ID from a select box and then scroll to that specific element using the following code snippet: // move to services $(function () { $("select.jump").change(function() { var selected = $( ...

jqueryhtml

ng-Pattern in AngularJS

Enter a number as your username in the field below: <fieldset class="col-sm-12 col-xs-12 text-center"> <label for="username">Username</label> <input type="text" id="username" ng-pattern="/^[0-9]*$/" ...

htmlangularjs

Is there a way to display images in Vuetify similar to the linked image below?

I am looking to measure my v-img like the one shown in the image below. https://i.stack.imgur.com/edMKr.jpg Does anyone know how I can achieve something similar to the image shown using vuetify's v-img. <div class="row"> <v ...

cssvue.jsnuxt.jsvuetify.js

is it possible to adjust the height of a tableRow in mui?

I recently created a table component using Mui. I've been attempting to adjust the height of the tableRows, but so far I haven't had any success. Below is my code snippet: import React, { memo } from "react"; import { ActionItemType, ...

javascriptcssreactjsmaterial-ui

Unable to specify the width of my website using full-width in Bootstrap

Using the bootstrap grid system has caused a slight issue for me. Whenever I scroll to the right side of the window, there is a white space that appears: I have set the body width as 100vw; Is there a way to eliminate this unwanted space? ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The overlay is larger in size compared to the video positioned beneath it

I'm having trouble placing a video underneath a purple layer as the overlay isn't aligning properly with my video. After removing the background-size: cover; in the home section, it appears like this: .videoContainer {} .videoContainer .over ...

htmlcss

CSS reinitialization for the HTML5 button element

Is there a way to reset the HTML5 button tag so that it behaves consistently across all browsers? Currently experiencing issues with IE9 going haywire when trying to style the button tag. I am aware of using display:block; but what other solutions exist.. ...

csshtml

Adding code containing various Google Maps elements in a fresh browser window using JavaScript

I've encountered an issue while trying to create a new page with a Google map and title based on the button clicked. Interestingly, when I copy/paste the HTML in the "newhtml" variable into an actual HTML file, it works perfectly fine. However, it doe ...

javascriptjqueryhtmlcssgoogle-maps

Sending checkbox status through ajax

Before assuming it's a duplicate, please carefully consider my concern: I am using an ajax function to post serialized data of checked checkboxes. I have approximately 40,000 checkboxes selected, but when I check the count of the serialized data, I a ...

jqueryajaxsymfonyserializationcheckbox

Creating a background image with linear gradients in Rails 5

Does anyone know how to implement a background image with linear gradients in CSS? Here is the code snippet I have: .main-bg-back-1{ background:linear-gradient(180deg,#22263f,rgba(33,41,94,.96)),url(../img/app/download-bg.jpg) no-repeat; backgroun ...

htmlcssruby-on-rails

Enhancing the appearance of the Switcher by framing it with

I've been working with the component package https://www.npmjs.com/package/react-switch-selector to create a design similar to this https://i.stack.imgur.com/voHqm.png Although I have made some progress, I'm struggling to add a border outline. H ...

htmlcssreactjssassborder

Designs created using ASCII characters in HTML that are not under my control

Hey there! I've been attempting to incorporate some ASCII art onto a website that I don't have control over. When I input text into their editor, it is then enveloped in <p> tags which makes adding ASCII art quite challenging. Firstly, I ca ...

htmlascii-art

exploring for a keyword on the primary Amazon platform (analyzing)

Hey everyone, I noticed that Amazon's main search bar code looks like this: <input type="submit" class="nav-input" value="Go" tabindex="7"> I'm considering creating a function that will locate this tag on amazon.co.uk and perform a search ...

htmlparsingseleniumbeautifulsoup

Alignment problem detected in Firefox and Safari, but works perfectly in Chrome

Currently dealing with a CSS problem on my website that is only appearing in Safari and Firefox, while Chrome displays it correctly. The images are not positioning correctly and are stacking instead of being placed in each box as intended. I've expe ...

htmlcssfirefoxsafari

Adaptive Container with Images that are not stretched to full width

Is there a way to achieve the same effect as seen in images 2 and 3 here: Although these images already have their own "padding," I'm curious if it can be replicated using just jQuery and CSS? I would appreciate any help or insights on this. Thank y ...

javascriptjquerycssresponsive-design

Comparing HTML5 and web services with MVC3

Within my organization, there is an ongoing discussion regarding the best approach to developing our future web applications. We currently have two distinct groups of developers who share common interests. All parties agree on utilizing html5, css3, and jQ ...

ajaxasp.net-mvc-3web-serviceshtml