Circumvent id selectors in a checkbox hack

Question

I've posted about this project before. Twice, actually. And while the answers have helped me to better understand my situation, they haven't really been applicable to my situation. I blame myself because I was posting a skeletal version of the final code which didn't fully illustrate what I needed to accomplish.

Essentially: I need to integrate a relatively simple checkbox hack into a CMS, but the CMS strips id selectors. Hence, code that ought to look something like this:

<input type="checkbox" name="thisisaname" id="thisisanid"><label class="thisisanid" for="thisisanid">Type 1</label>

...ends up like this:

<input type="checkbox" name="thisisaname"><label class="thisisanid" for="thisisanid">Type 1</label>

Predictably, this breaks everything, and ostensibly any adaptation appears to be impossible. There is no CMS-specific alternative like ClientID=. Neither jQuery nor JavaScript are available to me (they're also stripped out by the CMS).

It's a case of something being extraordinarily simple to do, but being constrained by a CMS that multiplies the difficulty to the point where I'm uncertain if it's even possible. I am not a CSS maven. I know it only as much as I need to do these little projects for a few friends, and I apologize for posting about this yet again, but it's driving me crazy not knowing if this is something which ought to be shelved.

This is the code. Obviously, it's sloppy and it isn't in its fully-styled form, but it's close enough that I think it's a better example than what I've posted in the past:

#basesurround {
  background: #000000cc;
  margin: 0 auto;
  width: 75%;
}

.information-wrap { display:flex; vertical-align:top;} 
.information-wrap aside { background: #00000066; vertical-align: top; flex: 1 1 250px; min-width: 150px; padding: 0; max-width: 200px; }
.information-wrap main { vertical-align: top; display: flex; flex-direction: row; flex-wrap: wrap; width: 85%; justify-content: center; padding: 0 0 25px 25px; }

.information-wrap label { background: #000000cc; width: 100%; display: inline-block; border-bottom: 1px solid #000000; color: #9FC3C9; text-transform: capitalize; font-weight: 100; font-size: 11px; letter-spacing: 1px; cursor: pointer; transition: all 0.7s ease; position: relative; padding: 10px 10px 10px 30px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-break: break-word; line-height: 125%; }
.information-wrap label:after { content: ""; width: 25px; height: 100%; position: absolute; left: 0; top: 0; background: #000000; filter: contrast(85%); }

.information-wrap details { position: relative; }

.information-wrap details summary::-webkit-details-marker { display: none; }

.information-wrap details summary::before { content: ""; position: absolute; left: 0; background: ; width: 1.5em; height: 1.5em; transition: transform 0.1s linear;}

.information-wrap summary { width: 100%; padding: 20px; padding-left: 25px; border-bottom: 1px solid #000000; background: #9FC3C9; font-family: Proxima; font-weight: 100; text-transform: uppercase; letter-spacing: 2px; color: #000000; -webkit-transition: all 1s ease; transition: all 1s ease; }

.information-wrap summary:hover { color: #ffffff4a; }

.information-wrap summary:focus {outline: none;}

.information-wrap details[open] > summary { background: #000000; filter: contrast(85%); color: #ffffff; }

.information-wrap details[open] > summary ~ * { animation: open 1s ease; }
.information-wrap details[open] summary:before {transform: rotate(90deg);}



.infocard { flex: 0 0 32.3%; display: inline-block; vertical-align: top; font-family: Proxima, Arial, Helvetica, Sans-Serif; position: relative; margin: .5%; align-items: center; justify-content: center; overflow: hidden; color: #000000; text-align: center; line-height: 160%; background-color: #141414; height: 300px; min-width: 300px; -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; min-width:250px;  border: 1px solid #000000;}

.infocard figure { border: 10px solid #DADCDB; margin: 10px 10px; padding: 0; display: inline-block; position: relative;}
.infocard figure img { display: block; height: auto; max-width: 100%; } 
.infocard figcaption { color: #000000; font: 400 18px/26px Proxima, Arial, Helvetica, Sans-Serif; padding: .2em 0; position: absolute; bottom: 0; text-align: center; width: 100%; }
.infocard figcaption span { font-size: 14px; color: #ffffff }
.infocard:last-of-type {margin-bottom: 200px;}

.infocard .icons { top: -7px; position: relative; color:#ffffff}


.information-wrap input { display: none; }
input:checked ~ main .infocard { display: none; }


 /* INFOCARD TYPE LABELS & CHECK CONTROLS */


  /* TYPE SET #1 */


#infotypeone_cont:checked ~ aside .infotypeone_cont,
#infotypetwo_cont:checked ~ aside .infotypetwo_cont,
#infotypethree_cont:checked ~ aside .infotypethree_cont,
#infotypefour_cont:checked ~ aside .infotypefour_cont,
#infotypefive_cont:checked ~ aside .infotypefive_cont
{ background: #000000; filter: contrast(85%); }

#infotypeone_cont:checked ~ main .infotypeone,
#infotypetwo_cont:checked ~ main .infotypetwo,
#infotypethree_cont:checked ~ main .infotypethree,
#infotypefour_cont:checked ~ main .infotypefour,
#infotypefive_cont:checked ~ main .infotypefive
{display: inline-block;}


  /* TYPE SET #2 */


#factiontypeone_cont:checked ~ aside .factiontypeone_cont,
#factiontypetwo_cont:checked ~ aside .factiontypetwo_cont,
#factiontypethree_cont:checked ~ aside .factiontypethree_cont,
#factiontypefour_cont:checked ~ aside .factiontypefour_cont,
#factiontypefive_cont:checked ~ aside .factiontypefive_cont
{ background: #000000; filter: contrast(85%); }

#factiontypeone_cont:checked ~ main .factiontypeone,
#factiontypetwo_cont:checked ~ main .factiontypetwo,
#factiontypethree_cont:checked ~ main .factiontypethree,
#factiontypefour_cont:checked ~ main .factiontypefour,
#factiontypefive_cont:checked ~ main .factiontypefive
{display: inline-block;}





 /* TYPE COLORS #1 */


.infotypeone {background-color: #ff00004d;}
.infotypetwo {background-color: #0076ff4d;}
.infotypethree {background-color: #ffac004d;}
.infotypefour {background-color: #ff00fc4d;}
.infotypefive {background-color: #d800004d;}







 /* INFORMATION CARDS */


.infocard * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }

.infocard .background { width: 100%; vertical-align: top; opacity: 0.2; -webkit-filter: grayscale(100%) blur(10px); filter: grayscale(100%) blur(10px); -webkit-transition: all 2s ease; transition: all 2s ease; }

.infocard figcaption { width: 100%; padding: 15px 25px; position: absolute; left: 0; top: 50%; }

figure.infocard img { display: inline;}

figure.infocard .profile {border-radius: 50%; position: absolute; bottom: 50%; left: 50%; max-width: 100px; opacity: 1; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.5); -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }

figure.infocard img.profile { height: 100px; width: 100px; }

figure.infocard h3 { line-height: 160%; margin: 0 0 5px; font-weight: 100; font-family: Proxima, Arial, Helvetica, Sans-Serif; text-transform: uppercase; text-indent: 0px; }
figure.infocard h3 a { text-decoration: none; letter-spacing: .3em; color: #9FC3C9cc; line-height: 18px; font-size: 15px; -webkit-transition: all 1s ease; transition: all 1s ease; }
figure.infocard h3 a:hover {opacity: .3; }
figure.infocard h3 span a, figure.infocard h3 span { font-size: 8px; opacity: 0.75; letter-spacing: 2px; display: inline-block; line-height: 10px; }

figure.infocard i { padding: 10px 5px; display: inline-block; font-size: 32px; color: #ffffff; text-align: center; opacity: 0.65;}
figure.infocard a {text-decoration: none; background-size: 0;}
figure.infocard i:hover {opacity: 1; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; }
figure.infocard:hover .background, figure.infocard.hover .background {-webkit-transform: scale(1.3);transform: scale(1.3);}

<div id="basesurround">
<form>
<div class="information-wrap">



<!--- BEGIN INFORMATION CONTROLLER :: CHECKBOX --->



  <input type="checkbox" name="cont" id="infotypeone_cont">
  <input type="checkbox" name="cont" id="infotypetwo_cont">
  <input type="checkbox" name="cont" id="infotypethree_cont">
  <input type="checkbox" name="cont" id="infotypefour_cont">
  <input type="checkbox" name="cont" id="infotypefive_cont">

  <input type="checkbox" name="cont" id="factiontypeone_cont">
  <input type="checkbox" name="cont" id="factiontypetwo_cont">
  <input type="checkbox" name="cont" id="factiontypethree_cont">
  <input type="checkbox" name="cont" id="factiontypefour_cont">
  <input type="checkbox" name="cont" id="factiontypefive_cont">  

<!--- END INFORMATION CONTROLLER :: CHECKBOX --->



  <aside>
    


<!--- BEGIN INFORMATION CONTROLLER :: LABELS --->



    <details><summary>
      

      SUBMENU TITLE
     
 
     </summary>

      
      <label class="infotypeone_cont" for="infotypeone_cont">Check 1</label>
      <label class="infotypetwo_cont" for="infotypetwo_cont">Check 2</label>
      <label class="infotypethree_cont" for="infotypethree_cont">Check 3</label>
      <label class="infotypefour_cont" for="infotypefour_cont">Check 4</label>
      <label class="infotypefive_cont" for="infotypefive_cont">Check 5</label>


    </details>

<!--- END INFORMATION CONTROLLER :: LABELS --->

<!--- BEGIN INFORMATION CONTROLLER --->

    <details><summary>
      

      SUBMENU TITLE
     
 
     </summary>

      
      <label class="factiontypeone_cont" for="factiontypeone_cont">Faction 1</label>
      <label class="factiontypetwo_cont" for="factiontypetwo_cont">Faction 2</label>
      <label class="factiontypethree_cont" for="factiontypethree_cont">Faction 3</label>
      <label class="factiontypefour_cont" for="factiontypefour_cont">Faction 4</label>
      <label class="factiontypefive_cont" for="factiontypefive_cont">Faction 5</label>


    </details>
<!--- END INFORMATION CONTROLLER --->
    
  </aside>
  
  <main>

 <!---  BEGIN INFORMATION CARD --->
<figure class="infocard infotypeone factiontypeone">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

   <a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
   <a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
   <a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
 <!---  END INFORMATION CARD --->

 <!---  BEGIN INFORMATION CARD --->
<figure class="infocard infotypetwo factiontypetwo">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

   <a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
   <a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
   <a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
 <!---  END INFO CARD --->

 <!---  BEGIN INFO CARD --->
<figure class="infocard infotypethree factiontypethree">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

   <a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
   <a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
   <a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
 <!---  END INFO CARD --->

 <!---  BEGIN INFO CARD --->
<figure class="infocard infotypefour factiontypefour">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

   <a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
   <a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
   <a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
 <!---  END INFO CARD --->

 <!---  BEGIN INFO CARD --->

<figure class="infocard infotypefive factiontypefive">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

   <a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
   <a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
   <a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
 <!---  END INFO CARD --->

</main></div>
</form></div>

I am in a quandary. I'm not very knowledgeable in CSS, and this CMS (which I must use, unfortunately) makes even the easiest of tasks inordinately difficult. Here's what I've tried:

Using nth-child / nth-of-type selectors: I was given this idea by Temani Afif. This solution is elegant and I loved it, but unfortunately, because of what the code will be used for, the structure will vary often.
Placing the input above the labels: I've been advised to look into this, but I can't find any information on how to properly code with the input above the label, so I'm unsure if it can be used in this
situation.
I thought about mimicking the behavior I want using [attribute|=value] selectors instead of id, but I haven't been able to get it to work. I don't know, though, whether I'm being limited by the code or my own incompetence, so I'm unsure if it's something worth looking into further.

So… Is there a recommended means of overcoming the id= limitations I've missed in my research?

FWIW, the purpose of this is to create a simple(ish) code where it's easy to append the INFO CARD part of the code as many times as needed to edit this for sorting movies/books/other information of that nature, while maintaining the ease at which one can change the figure class=.

To clarify, what is your question exactly? How to target the `input` with `label` without an `id`? How to apply styles without `id`? Something else? All of the above? — Amadan, Jul 30 '18 at 04:19
How to achieve a checkbox hack without an id, so.... how to target `input` with `label` without an `id`, I suppose. — user4985, Jul 30 '18 at 07:37
Not sure what you mean by "checkbox hack". What you have written in the post with words "checkbox hack" just looks like attaching a label to a checkbox? — Amadan, Jul 30 '18 at 07:39
Essentially, I believe so. I apologize, I really don't know what else to call it, and 'checkbox hack' seemed to be the standard terminology: https://stackoverflow.com/questions/29950272/how-does-css-checkbox-hack-work -- I've used it in the past (with full `id=` access) to create CSS-only tabs, drop-down menus, that sort of thing. — user4985, Jul 30 '18 at 07:59
Ah I see. Yeah, some of those depend on having label be before, or even far from the checkbox, due to the limitations of CSS selectors, so you can't use the inclusion syntax, or at least not easily... — Amadan, Jul 30 '18 at 08:10
So it's looking likely that stripping out the `id=` selectors is an entirely impractical thing to try, then? — user4985, Jul 30 '18 at 08:20
Alas, tell that to Danga Interactive. :P I do understand stripping user `id=` selectors to avoid conflict, but... blast... it makes things so unnecessarily difficult. Thank you for your help, though. — user4985, Jul 30 '18 at 08:31
"tell that to Danga Interactive" - Can't, they don't exist any more. — Amadan, Jul 30 '18 at 08:34
....yeah, okay, that's an excellent point. (But people, inexplicably, still use their stuff. Gah.) — user4985, Jul 30 '18 at 08:49

score 0 · Answer 1 · answered Aug 09 '18 at 16:02

The issue here is the rather limited way in which the for attribute works inside a <label> - it looks for a form control with the corresponding id. (Only the id will do - no other attribute.)

If it cannot find one, then no form control ends up being associated with the <label>... consequently, the checkbox hack, which relies on the for attribute working, cannot produce the intended effect.

Since we can't add the id to the checkbox in the document's initial mark up, why not, instead, add the id to the checkbox dynamically, by accessing the Document Object Model (DOM)?

This is easily done in a single line:

document.querySelector('[name="thisisaname"]').id = 'thisisanid';

See the Working Example below, noting that the id is not present in the initial markup:

document.querySelector('[name="thisisaname"]').id = 'thisisanid';

label {
cursor: pointer;
}

label:hover {
font-weight: bold;
text-decoration: underline;
}

input[type=checkbox],
input[type=checkbox] + p {
opacity: 0;
}

input[type=checkbox] + p {
transition: opacity 1s linear;
}

input[type=checkbox]:checked + p {
opacity: 1;
}

<label class="thisisanid" for="thisisanid">Click Me</label>
<input type="checkbox" name="thisisaname">
<p>Checkbox hack is working</p>

Circumvent id selectors in a checkbox hack

1 Answers1