在复选框 hack 中绕过 id 选择器

【问题标题】：Circumvent id selectors in a checkbox hack在复选框 hack 中绕过 id 选择器
【发布时间】：2018-07-30 04:15:02
【问题描述】：

我之前已经发布过关于这个项目的信息。两次，实际上。虽然这些答案帮助我更好地了解了我的情况，但它们并没有真正适用于我的情况。我责备自己，因为我发布了最终代码的骨架版本，它没有完全说明我需要完成什么。

本质上：我需要将一个相对简单的复选框 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 专家。我只知道我需要为几个朋友做这些小项目，我很抱歉再次发布这个，但不知道这是否应该被搁置，这让我发疯了。

这是代码。显然，它很草率，而且不是完全风格的形式，但它足够接近，我认为这是一个比我过去发布的更好的例子：

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

【问题讨论】：

  • 澄清一下，您的问题到底是什么？如何在没有id 的情况下使用label 定位input？如何在没有id 的情况下应用样式？还有什么？以上都是？
  • 如何在没有 id 的情况下实现复选框 hack，所以.... 我想如何在没有 id 的情况下使用 label 定位 input。
  • 不确定您所说的“复选框破解”是什么意思。你在帖子中写的“checkbox hack”字样看起来就像在复选框上附加标签？
  • 基本上，我相信是这样。抱歉，我真的不知道还能叫什么，“checkbox hack”似乎是标准术语：stackoverflow.com/questions/29950272/…——我过去曾使用过它（具有完整的id= 访问权限）来创建纯 CSS 选项卡、下拉菜单之类的东西。
  • 啊，我明白了。是的，由于 CSS 选择器的限制，其中一些依赖于在复选框之前，甚至远离复选框，所以你不能使用包含语法，或者至少不容易......

标签： html css checkbox css-selectors


【解决方案1】：

这里的问题是for 属性在&lt;label&gt; 内的工作方式相当有限——它会查找具有相应id 的表单控件。 （只有 id 可以 - 没有其他属性。）

如果找不到，则没有表单控件最终与 &lt;label&gt; 相关联...因此，依赖于 for 属性工作的 checkbox hack 无法生成预期的效果。

既然我们不能将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>

【讨论】：

    猜你喜欢
    • 2019-06-29
    • 1970-01-01
    • 2013-06-19
    • 2019-09-30
    • 2010-11-05
    • 1970-01-01
    • 2017-10-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode