没有Javascript的动态CSS多种形式

由 发布于 csshtmlformscss-selectorscontact-form
 收藏

我构建了一个动态CSS表单，不需要Javascript。

我正在记录表单设计，并要求对设计的增强或替代方法提出意见和建议，以实现非Javascript动态CSS表单为目标。

For example, with the combination of a pseudo-class ~ general sibling combinator, why does the general decendant combinator work #rad1_1:checked ~ fieldset.cat1 .cat1_1 but the child combinator doesn't #rad1_1:checked ~ fieldset.cat1 > .cat1_1?

增强的表单设计可以包括：

  • 根据先前表单输入的内容动态扩展表单输入；
  • 多个类别对应于不同的形式，而不是字段集。
  • 样式的分组类别（html容器破坏了动态CSS：checked选择器，但Flexbox是必需的，没有容器的类不允许样式为first-child / first-of-type和last-child / last-of-type）

多个类别，无子类别

HTML：

<form>
  <input id="rad1" class="cat1" type="radio" name="menu" /><label for="rad1">Red</label><input id="rad2" class="cat2" type="radio" name="menu" /><label for="rad2">Green</label><input id="rad3" class="cat3" type="radio"  name="menu" /><label for="rad3">Blue</label>
  <fieldset class="generic">
    <input id="text1" type="text" />
  </fieldset>
  <fieldset class="cat1" style="background-color: red">
    <input id="text2" type="text" />
  </fieldset>
  <fieldset class="cat2" style="background-color: green">
    <input id="text2" type="text" />
  </fieldset>
  <fieldset class="cat3" style="background-color: blue">
    <input id="text3" type="text" />
  </fieldset>  
</form>

CSS：

/* Hide unexpanded fieldsets and navigation radio buttons */
form > fieldset { display: none; }
form > input[type="radio"] { display: none; }

/* Radio button headings styling */
form > label {
  display: inline-block;
  margin: 0 0.6%;
  width: 32%;
  text-align: center;
  }
form > label:hover { cursor: pointer; }
form > input[type="radio"]:checked + label:hover { cursor: default; }

/* Display generic and corresponding fieldset when form menu is clicked */
form > input[type="radio"]:checked ~ .generic { display: block; }
form > .cat1[type="radio"]:checked ~ .cat1 { display: block; }
form > .cat2[type="radio"]:checked ~ .cat2 { display: block; }
form > .cat3[type="radio"]:checked ~ .cat3 { display: block; }

Ref: https://jsfiddle.net/zm095dj8/

多个类别，带有子类别

HTML：

<form>
  <input id="rad1_1" class="cat1" type="radio" name="menu" /><label for="rad1_1">Red 1</label><input id="rad1_2" class="cat1" type="radio" name="menu" /><label for="rad1_2">Red 2</label><input id="rad1_3" class="cat1" type="radio" name="menu" /><label for="rad1_3">Red 3</label><input id="rad2_1" class="cat2" type="radio" name="menu" /><label for="rad2_1">Green 1</label><input id="rad2_2" class="cat2" type="radio" name="menu" /><label for="rad2_2">Green 2</label><input id="rad2_3" class="cat2" type="radio" name="menu" /><label for="rad2_3">Green 3</label><input id="rad3_1" class="cat3" type="radio" name="menu" /><label for="rad3_1">Blue 1</label><input id="rad3_2" class="cat3" type="radio" name="menu" /><label for="rad3_2">Blue 2</label><input id="rad3_3" class="cat3" type="radio" name="menu" /><label for="rad3_3">Blue 3</label>
  <fieldset class="generic">
        <label for="text0_0">Generic</label><input id="text0_0" type="text" />
  </fieldset>
  <fieldset class="cat1" style="background-color: red">
        <label for="text1_0">Red uncategorised</label><input id="text1_0" type="text" />
        <label for="text1_1" class="cat1_1">Red subcategory: <b>1</b></label><input id="text1_1" class="cat1_1" type="text" />
        <label for="text1_2" class="cat1_2">Red subcategory: <b>2</b></label><input id="text1_2" class="cat1_2" type="text" />
        <label for="text1_3" class="cat1_3">Red subcategory: <b>3</b></label><input id="text1_3" class="cat1_3" type="text" />
  </fieldset>
  <fieldset class="cat2" style="background-color: green">
        <label for="text2_0">Green uncategorised</label><input id="text2_0" type="text" />
        <label for="text2_1" class="cat2_1">Green subcategory: <b>1</b></label><input id="text2_1" class="cat2_1" type="text" />
        <label for="text2_2" class="cat2_2">Green subcategory: <b>2</b></label><input id="text2_2" class="cat2_2" type="text" />
        <label for="text2_3" class="cat2_3">Green subcategory: <b>3</b></label><input id="text2_3" class="cat2_3" type="text" />
  </fieldset>
  <fieldset class="cat3" style="background-color: blue">
        <label for="text3_0">Blue uncategorised</label><input id="text3_0" type="text" />
        <label for="text3_1" class="cat3_1">Blue subcategory: <b>1</b></label><input id="text3_1" class="cat3_1" type="text" />
        <label for="text3_2" class="cat3_2">Blue subcategory: <b>2</b></label><input id="text3_2" class="cat3_2" type="text" />
        <label for="text3_3" class="cat3_3">Blue subcategory: <b>3</b></label><input id="text3_3" class="cat3_3" type="text" />
  </fieldset>  
</form>

CSS：

/* Hide unexpanded fieldsets and navigation radio buttons */
form > fieldset { display: none; }
form > input[type="radio"] { display: none; }

/* Radio button headings styling */
form > label {
  display: inline-block;
  margin: 0 0.3%;
  width: 10.5%;
  text-align: center;
  }
form > label:hover { cursor: pointer; }
form > input.cat1 + label { background-color: red; }
form > input.cat2 + label { background-color: green; }
form > input.cat3 + label { background-color: blue; }
form > input[type="radio"]:checked + label:hover { cursor: default; }

/* Display generic and corresponding fieldset when form menu is clicked */
form > input[type="radio"]:checked ~ fieldset.generic { display: block; }

/* Hide all fieldset subcategory classes */
.cat1_1, .cat1_2, .cat1_3, .cat2_1, .cat2_2, .cat2_3, .cat3_1, .cat3_2, .cat3_3 { display: none; }

/* Display cat1 fieldset and subcategories */
form > .cat1[type="radio"]:checked ~ fieldset.cat1 { display: block; }
form > #rad1_1:checked ~ fieldset.cat1 .cat1_1 { display: block; }
form > #rad1_2:checked ~ fieldset.cat1 .cat1_2 { display: block; }
form > #rad1_3:checked ~ fieldset.cat1 .cat1_3 { display: block; }

/* Display cat2 fieldset and subcategories */
form > .cat2[type="radio"]:checked ~ fieldset.cat2 { display: block; }
form > #rad2_1:checked ~ fieldset.cat2 .cat2_1 { display: block; }
form > #rad2_2:checked ~ fieldset.cat2 .cat2_2 { display: block; }
form > #rad2_3:checked ~ fieldset.cat2 .cat2_3 { display: block; }

/* Display cat3 fieldset and subcategories */
form > .cat3[type="radio"]:checked ~ fieldset.cat3 { display: block; }
form > #rad3_1:checked ~ fieldset.cat3 .cat3_1 { display: block; }
form > #rad3_2:checked ~ fieldset.cat3 .cat3_2 { display: block; }
form > #rad3_3:checked ~ fieldset.cat3 .cat3_3 { display: block; }

Ref: https://jsfiddle.net/e3z618rd/

评论