堆栈内存溢出
  繁体   English   中英

当 label 标签放在输入标签之前时，Css 不起作用？

[英]Css not working when label tag placed before input tag?

 原文  2020-08-20 12:58:06  4   1    javascript/ html/ css/ checkbox

问题描述

切换两个标签（输入和标签）的顺序放置会停止 function 运行或 css 加载。 我试过弄乱它，但无济于事。 我希望这些框出现在是或否选项周围，除了 css 工作正常，所以它只是这一节

<ul>${qamap(([a])=>`<label class="for-checkbox-budget"><input class="checkbox-budget" type="radio" name="${nam}" value="${a}"><span data-hover="${a}">${a}</span></label>`).join('<br>\n')}</div></ul>`; }).join('\n')+frm.innerHTML;

@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');


:root {
    --white: #ffffff;
    --light: #f0eff3;
    --black: #000000;
    --dark-blue: #1f2029;
    --dark-light: #353746;
    --red: #da2c4d;
    --yellow: #f8ab37;
    --grey: #ecedf3;
}

/* #Primary
================================================== */

body{
    width: 100%;
    background: var(--dark-blue);
    overflow-x: hidden;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 30px;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}
h1{
    font-family: 'Poppins', sans-serif;
    font-size: 45px;
    line-height: 30px;
    color: var(--white);
    letter-spacing: 1px;
    font-weight: 500;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}
p{
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 30px;
    color: var(--white);
    letter-spacing: 1px;
    font-weight: 500;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}

::selection {
    color: var(--white);
    background-color: var(--black);
}
::-moz-selection {
    color: var(--white);
    background-color: var(--black);
}
mark{
    color: var(--white);
    background-color: var(--black);
}
.section {
    position: relative;
    width: 100%;
    display: block;
    text-align: center;
    margin: 0 auto;
}
.over-hide {
    overflow: hidden;
}
.z-bigger {
    z-index: 100 !important;
}


.background-color{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark-blue);
    z-index: 1;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.checkbox:checked ~ .background-color{
    background-color: var(--white);
}


[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked){
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    visibility: hidden;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
    position: relative;
    width: 70px;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    margin: 17px 0;
    margin-top: 100px;
    height: 6px;
    border-radius: 4px;
    background-image: linear-gradient(298deg, var(--red), var(--yellow));
    z-index: 100 !important;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
    position: absolute;
    font-family: 'unicons';
    cursor: pointer;
    top: -17px;
    z-index: 2;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.checkbox:not(:checked) + label:before {
    content: '\eac1';
    left: 0;
    color: var(--grey);
    background-color: var(--dark-light);
    box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked + label:before {
    content: '\eb8f';
    left: 30px;
    color: var(--yellow);
    background-color: var(--dark-blue);
    box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}

.checkbox:checked ~ .section .container .row .col-12 p{
    color: var(--dark-blue);
}
.checkbox:checked ~ .section .container .row .col-12 h1{
    color: var(--dark-blue);
}


.checkbox-budget:checked + label,
.checkbox-budget:not(:checked) + label{
    position: relative;
    display: inline-block;
    padding: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 260px;
    font-size: 52px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 auto;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    text-transform: uppercase;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
    -webkit-text-stroke: 1px var(--white);
    text-stroke: 1px var(--white);
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
}
.checkbox-budget:not(:checked) + label{
    background-color: var(--dark-light);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-budget:checked + label{
    background-color: transparent;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:not(:checked) + label:hover{
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:checked + label::before,
.checkbox-budget:not(:checked) + label::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-image: linear-gradient(138deg, var(--red), var(--yellow));
    z-index: -1;
}
.checkbox-budget:checked + label span,
.checkbox-budget:not(:checked) + label span{
    position: relative;
    display: block;
}
.checkbox-budget:checked + label span::before,
.checkbox-budget:not(:checked) + label span::before{
    position: absolute;
    content: attr(data-hover);
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    -webkit-text-stroke: transparent;
    text-stroke: transparent;
    -webkit-text-fill-color: var(--white);
    text-fill-color: var(--white);
    color: var(--white);
    -webkit-transition: max-height 0.3s;
    -moz-transition: max-height 0.3s;
    transition: max-height 0.3s;
}
.checkbox-budget:not(:checked) + label span::before{
    max-height: 0;
}
.checkbox-budget:checked + label span::before{
    max-height: 100%;
}

.checkbox:checked ~ .section .container .row .col-xl-10 .checkbox-budget:not(:checked) + label{
    background-color: var(--light);
    -webkit-text-stroke: 1px var(--dark-blue);
    text-stroke: 1px var(--dark-blue);
    box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}

.oval {
                width: 200px;
                height: 80px;
                background: #39ff14;
                border-radius: 40px;
                font-size: 20px;
                font-family: 'Poppins', sans-serif;
                color: var(--white);
            }

<body>
    <body>
    <div class="section over-hide z-bigger">
        <input class="checkbox" type="checkbox" name="general" id="general">
        <label class="for-checkbox" for="general"></label>
        <div class="background-color"></div>
        <div class="section over-hide z-bigger">
            <div class="container pb-5">
                <div class="row justify-content-center pb-5">
                    <div class="col-12 pt-1">
                        <h1 class="mb-4 pb-2">Lets Start</h1>
                    </div>
<form name="combitest">
  <p> Score for test 1 (Stroke) =   <span class="res"></span><br><br>
  <p> Score for test 2 (Diabetes) = <span class="res"></span><br><br>
  <p> Score for test 3 (some other test) = <span class="res"></span><br><br>
  <input type="reset" class="oval" value="Clear Answers">
</form>
</body>

    const questions=[  // questions,            answers with their associated points:
   {q:"History of Stroke",                  a:[["Yes",[10,10, 0]],["No" ,    [ 0, 0, 0]]]}
   ];
const frm =document.querySelector("form");
// create questions block first:
frm.innerHTML=questions.map(q=>{
  let nam=q.q.toLowerCase().replace(/ /g,"").substr(0,12)
  return `<div class="col-12 pt-1">
            <p class="mb-4 pb-2">${q.q}</p
          </div>
             <div class="col-xl-10 pb-5">
          <ul>${q.a.map(([a])=>`<label class="for-checkbox-budget"><input class="checkbox-budget" type="radio" name="${nam}" value="${a}"><span data-hover="${a}">${a}</span></label>`).join('<br>\n')}</div></ul>`;
}).join('\n')+frm.innerHTML;
let spans=[...document.querySelectorAll('span.res')];
document.querySelector("input[type=reset]").onclick=ev=>spans.forEach(sp=>sp.textContent="");
frm.onchange=ev=>{
  let res=[0,0,0], uls=document.querySelectorAll('form ul');  
  questions.forEach((qo,i)=>{ var a;
    if (a=uls[i].querySelector("input:checked")){ // only if an answer has been chosen
      let pts=qo.a.find(([el])=>el==a.value)[1]   // get array with points for all tests
      res.forEach((r,i)=>res[i]+=pts[i]);         // add points to res-array
    }    
  }); 
  res.forEach((r,i)=>spans[i].textContent=r)
};

1 个解决方案

解决方案1
 0  2020-08-20 13:02:24

+符号是下一个兄弟组合符。

如果您交换订单，则label不是下一个兄弟，而是前一个。

没有先前的兄弟组合（因为 CSS 通常从不应用基于 DOM 树中稍后出现的内容的规则（出于性能和避免冲突的原因））。

通过将 Flexbox 布局与order属性相结合，您可以在更改呈现顺序的同时将元素保持在相同的 DOM 顺序中。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 放在head标签中的jQuery代码不起作用 在输入标签之前或之后替换文本标签 放置在head标签中时无法识别样式 onclick不适用于输入代码 AngularJs：ng-include放置在ng-view标签内时不起作用 标签标签包装复选框输入时如何删除复选框和样式标签 使用JQuery为DOM动态地为每个输入标签添加标签标签 jQuery - 如何用标签包装输入标签 带有标签标签的输入框中的文件拖放 弹出框不适用于按钮和输入标签
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM