Steps to creating a proper cascade using the label statement

I am currently customizing the appearance of a checkbox. The HTML code in the file called fin1.cfm is as follows:

 <td>Master Event:</td>
 <td>
    <input type = "checkbox" id = "cb_e" name = "datesumm" value = "" >
    <label for = "cb_e">&nbsp; </label>
 </td>

The CSS code in the betty.css file looks like this:

 label {  
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;
    padding-top: 15px;  
    margin-right: 0px;  
    font-size: 13px;  
} 

input[type=checkbox] {  
    display: none;  
}

label:before {  
content: "";  
display: inline-block;  
width: 30px;  
height: 20px;  
margin-right: 0px;  
position: absolute; 
left: 10;  
bottom: 1px;  
background-color: #E6F2F0;     
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
border-radius: 10px 10px 10px 10px;
 }  

input[type=checkbox]:checked + label:before {  
   content: "D"; 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 15px;  input[type=checkbox]:checked + label:before
    color: red;
    text-align: center;  
    line-height: 15px;
    padding-top: 7px;         
}

The issue I am facing pertains to the content property within the 

input[type=checkbox]:checked + label:before
selector.

There are instances where I need the content to be "D" as shown, but there are also other situations where I require different content, such as a check mark.

I have attempted various solutions like moving the statement to a separate CSS file or defining a class for it and applying that to the HTML label tag, but so far I haven't achieved the desired outcome.

If anyone could provide guidance on how to display different content in distinct locations, I would greatly appreciate it.

htmlcss

Answer №1

It seems like there might be a way to create a general rule for all checkboxes and then specify individual rules for certain checkboxes that override specific properties from the general rule.

Here is an example:

UPDATED (based on comments)

/* default styling for all checkboxes */
    input[type=checkbox]:checked + label:before {
      content: "D";
    }

    /* specify ids or add custom classes for more specific checkbox styles */
    input#cb_f:checked + label:before,
    input.customCheck:checked + label:before,
    input#cb_f3:checked + label:before {
      content: "\2713";
    }

Using a custom class like .customCheck makes it easier than listing all possible ids.

To use the custom class, just add it to your HTML code as shown here:

<input type="checkbox" id="cb_f2" name="datesumm" value="" class="customCheck">

label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  padding-top: 15px;
  margin-right: 0px;
  font-size: 13px;
}
input[type=checkbox] {
  display: none;
}
label:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 20px;
  margin-right: 0px;
  position: absolute;
  left: 10;
  bottom: 1px;
  background-color: #E6F2F0;
  box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
  border-radius: 10px 10px 10px 10px;
}

/* default styling for all checkboxes */
input[type=checkbox]:checked + label:before {
  content: "D";
}

/* specify ids or add custom classes for more specific checkbox styles */
input#cb_f:checked + label:before,
input.customCheck:checked + label:before,
input#cb_f3:checked + label:before {
  content: "\2713";
}
<table>
  <tr>
    <td>Master Event:</td>
    <td>
      <input type="checkbox" id="cb_e" name="datesumm" value="">
      <label for="cb_e">&nbsp;</label>
    </td>
  </tr>
  <tr>
    <td>Master Event2:</td>
    <td>
      <input type="checkbox" id="cb_e2" name="datesumm" value="">
      <label for="cb_e2">&nbsp;</label>
    </td>
  </tr>
  <tr>
    <td>Master Event3:</td>
    <td>
      <input type="checkbox" id="cb_e3" name="datesumm" value="">
      <label for="cb_e3">&nbsp;</label>
    </td>
  </tr>
  <tr>
    <td>Secondary Event:</td>
    <td>
      <input type="checkbox" id="cb_f" name="datesumm" value="">
      <label for="cb_f">&nbsp;</label>
    </td>
  </tr>
  <tr>
    <td>Secondary Event2:</td>
    <td>
      <input type="checkbox" id="cb_f2" name="datesumm" value="" class="customCheck">
      <label for="cb_f2">&nbsp;</label>
    </td>
  </tr>
  <tr>
    <td>Secondary Even3:</td>
    <td>
      <input type="checkbox" id="cb_f3" name="datesumm" value="" class="customCheck">
      <label for="cb_f3">&nbsp;</label>
    </td>
  </tr>
</table>

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

Sending data via Ajax using the multipart/form-data format

I am encountering an issue with a script that is not working correctly. When I submit the form without using the script, everything works as expected. However, when I use the script to submit the form, only the category and description are included in the ...

jqueryhtmlajax

Understanding page navigation in PHP

Is there a way to validate the inputs on a given page, display error messages if any, and then move to the next page if the inputs are correct? How can this be achieved? <html> <head></head> <body> <?php // define variables an ...

phphtmlvalidationnavigation

Creating a customized Paypal form with user-selected options

I want to make it easy for visitors to my website to pay through Paypal by simply clicking on a link that will take them directly to the checkout page. What I'm looking for is a way to provide basic options such as: Allowing users to enter their na ...

htmlcsspaypal

The program is unable to identify the function .modal("show") upon adding HTML to the page

I'm currently developing a program that utilizes a click event handler to trigger an ajax request to my node server. The server then generates information within a handlebars partial and sends it back to the client using res.render("partials/scraped-a ...

javascripthtmlnode.jstwitter-bootstrap-4express-handlebars

Learn the process of playing a video in an HTML5 video player after it has finished downloading

// HTML video tag <video id="myVideo" width="320" height="176" preload="auto" controls> <source src="/server/o//content/test2.mp4" onerror="alert('video not found')" type="video/mp4"> Your browser does not support HTML5 vid ...

javascripthtmlvideovue.jsvideo-player

"When setting up a window.EventListener, the Div element fails to be hidden when setting its display property to 'none

I'm working on creating a preloader by displaying an overlay until all the content on the page is loaded. However, despite checking my code multiple times, I can't seem to figure out why it's not working. If anyone could provide some assist ...

javascripthtmlcss

Adjust the text size to fit perfectly within the boundaries of a textarea input field

Is there a way to ensure that users type within a specific area with formatting and returns in a textarea element? I'm looking for a solution that limits overflow and ensures users stay within the designated area. How can this be achieved? I am worki ...

htmlcss

A search form utilizing prepared statements in mysqli

Well met again, everyone. I recently reached out for help on improving some messy code I had put together, and the response was swift. Thank you for that! You can find the original question thread here: PHP - Search database and return results on the sam ...

phphtmlmysqli

form controls disappear upon adding form tags

Currently experiencing an issue with angular and forms that I could use some help with. I have a dynamic form that is functioning properly, but now I need to add validations to it. After following this guide, I established the structure correctly. Howeve ...

javascripthtmlangularjsforms

Flipping a combination of CSS 3 and JavaScript cards will cause them to flip all together in unison

Hello! I came across a really cool card flip code that is IE compatible. I made some modifications to it and got it working, but there's one problem - instead of flipping the selected card, it flips all the cards. I tried modifying the JavaScript code ...

javascriptjqueryhtmlcsstransition

What is the best way to generate a search link after a user has chosen their search criteria on a webpage?

In my search.html file, I have set up a form where users can input their search criteria and click the search button to find information within a database of 1000 records. The HTML part is complete, but I am unsure how to create the action link for the for ...

javascripthtmlnode.jsexpress

How can I create a CSS animation that fades in text blocks when hovering over an image?

I have been trying to implement CSS3 transitions to create a hover effect where the text and background color fade in when hovering over an image. Despite my attempts with various selectors and transition types, I can't seem to achieve the desired res ...

htmlcsscss-transitionsfade

Open $_POST in a new tab that has been edited for your convenience

<form method="post" target="_blank" action="battle.php" onsubmit="window.open('battle.php','','width=700,height=500,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=30,top=0');" > < ...

javascriptphphtmlcss

Improving the functionality of multiple range slider inputs in JavaScript codeLet me

Is it possible to have multiple range sliders on the same page? Currently, all inputs only affect the first output on the page. Check out an example here: http://codepen.io/andreruffert/pen/jEOOYN $(function() { var output = document.querySelectorAl ...

javascripthtml

Is your CSS not reflecting changes in Node.js?

I am having trouble getting the CSS to update in the browser using Browser Sync via Gulp on Node.js. What could be the issue? Below is my Gulp.js file: var themename = 'playtest haha 1'; var gulp = require('gulp'), // Prepare ...

htmlnode.jswordpressnpmgulp

Ways to incorporate a conditional statement within a dropdown menu

When a user interacts with a dropdown, I want to conditionally show different choices based on their selection. If the user clicks on a checkbox, a specific set of options will appear; if they click on a radio button, another set of options will appear. h ...

javascriptjqueryhtml

The issue of conflicting stylesheets is causing alignment and height discrepancies when using multiple icons

Is there a way to align icons from different stylesheets to have the same height? When attempting to use icons from separate stylesheets, I encountered a height issue where one icon left space at the top and bottom while another appeared correctly aligned. ...

htmlcssresponsive

I am unable to sketch my backdrop. - HTML Canvas Game

Recently I've encountered an issue in my code where the image doesn't appear and mouse interaction stops working when I uncomment bg.draw() within the draw function. function draw() { clearAllCtx(); player.draw(); ene ...

javascripthtmlcanvasmouseinteraction

Tips for designing a webpage where a div element adjusts to fit the screen, regardless of the width of the content inside

Can CSS3 or a JavaScript library be used to create a webpage with a div that contains content wider than the screen, such as a large image or newsletter, and still fits it to the screen without scrolling or clipping any content? Below is an image demonst ...

csshtml

At times, the AngularJS directive may not be invoked

Here is my custom directive: ppm.directive('focusMe', function($timeout) { return { link: function(scope, element, attrs) { scope.$watch(attrs.focusMe, function(value) { if(value === true) { console.log(& ...

javascripthtmlangularjsangularjs-directive