html - 在复选框 hack 中规避 id 选择器

我之前发布过关于这个元素的帖子。实际上是两次。虽然答案帮助我更好地了解我的情况，但它们并不真正适用于我的情况。我责怪自己，因为我发布的是最终代码的骨架版本，它没有完全说明我需要完成的工作。

本质上:我需要将一个相对简单的复选框 hack 集成到 CMS 中，但 CMS 去除了 id 选择器。因此，代码应该如下所示:

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

...结果是这样的:

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

可以预见的是，这会破坏一切，表面上任何改编似乎都是不可能的。没有像 ClientID= 这样特定于 CMS 的替代方案。我无法使用 jQuery 和 JavaScript(它们也被 CMS 删除了)。

这是一个非常简单的事情，但受到 CMS 的限制，这使难度成倍增加，以至于我不确定它是否可行。我不是 CSS 专家。我只知道我需要为几个 friend 做这些小元素，我为再次发帖道歉，但不知道这是否应该被搁置，这让我发疯。

这是代码。显然，它很草率，也不是完全样式化的形式，但它足够接近，我认为它是比我过去发布的更好的例子:

#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>

我很纠结。我对 CSS 不是很了解，而这个 CMS(不幸的是，我必须使用它)让最简单的任务变得异常困难。这是我尝试过的:

使用 nth-child/nth-of-type 选择器: Temani Afif .这个解决方案很优雅，我喜欢它，但是不幸的是，由于代码的用途，结构会经常变化。
将输入放在标签上方:有人建议我查看进入这个，但我找不到任何关于如何正确编码的信息输入在标签上方，所以我不确定它是否可以用于此
情况。
我想过模仿我想要使用的行为 [attribute|=value] 选择器而不是 id，但我还没有能够让它工作。不过，我不知道我是否正在受限于代码或者我自己的无能，所以我不确定是不是一些值得进一步研究的东西。

那么……是否有推荐的方法来克服我在研究中遗漏的 id= 限制？

FWIW，这样做的目的是创建一个简单的(ish)代码，可以很容易地根据需要多次附加代码的 INFO CARD 部分来编辑它以对电影/书籍进行排序/该性质的其他信息，同时保持可以轻松更改 figure class=。

最佳答案

这里的问题是 for属性在 <label> 中起作用- 它寻找具有相应 id 的表单控件. (只有 id 可以 - 没有其他属性。)

如果找不到，则没有表单控件最终与 <label> 相关联...因此，checkbox hack，它依赖于 for属性起作用，不能产生预期的效果。

因为我们无法添加 id到文档初始标记中的复选框，为什么不添加 id通过访问文档对象模型 (DOM) 动态添加到复选框？

这很容易在一行中完成:

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

请参阅下面的工作示例，注意 id初始标记中不存在:

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>

关于html - 在复选框 hack 中规避 id 选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51586897/

html - 在复选框 hack 中规避 id 选择器

上一篇：css - 从 enavto 主题检查插件收到有关自定义 css 的警告

下一篇：php - 图片和产品信息未显示在页面上