日星网
搜索

记录日常点点滴滴，欢迎来到我的小站。

0%

CSS 自动判断输入选项是否为必填

发表于 分类于

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<form>
    <fieldset>
        <legend>问卷调查</legend>
        <ol class="cs-ques-ul">
            <li class="cs-ques-li">
                <input type="radio" name="ques1" required>1-3年
                <input type="radio" name="ques1">3-5年
                <input type="radio" name="ques1">5年以上
                <h4 class="cs-caption">你从事前端几年了？</h4>
            </li>
            <li class="cs-ques-li">
                <input type="radio" name="ques2" required>1-3小时
                <input type="radio" name="ques2">3-5小时
                <input type="radio" name="ques2">小时以上
                <h4 class="cs-caption">你每周多少业余时间用来学习前端技术？</h4>
            </li>
            <li class="cs-ques-li">
                <input type="radio" name="ques3" required>1-3本
                <input type="radio" name="ques3">3-5本
                <input type="radio" name="ques3">5本以上
                <h4 class="cs-caption">你每年买多少本前端相关数据？</h4>
            </li>
            <li class="cs-ques-li">
                <textarea></textarea>
                <h4 class="cs-caption">有什么其它想说的？</h4>
            </li>
        </ol>
        <p><input type="submit" value="提交"></p>
    </fieldset>
</form>
<style>
.cs-ques-ul {
    counter-reset: quesIndex;
}
.cs-ques-li {
    display: table;
    width: 100%;
    position: relative;
}
/* 前面序号计数显示与定位 */
.cs-ques-li::before {
    counter-increment: quesIndex;
    content: counter(quesIndex) ".";
    position: absolute; top: .75em;
    margin: 0 0 0 -20px;
}
.cs-caption {
    display: table-caption;
    caption-side: top;
}
/* 标记必选还是可选 */
:optional ~ .cs-caption::after {
    content: "（可选）";
    color: gray;
}
:required ~ .cs-caption::after {
    content: "（必选）";
    color: red;
}
</style>