表单组件颜色，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12

            
            <ul id="ul">
    <li>复选框：<input type="checkbox" checked></li>
    <li>单选框<input type="radio" checked></li>
    <li>范围选择框：<input type="range"></li>
    <li>进度条：<progress value="0.5"></li>
    <li>下拉框：<select>
            <option>选择一</option>
            <option>选择二</option>
            <option>选择三</option>
            <option>选择四</option>
        </select></li>
</ul>

编辑器加载中

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9

            
            :root {
    --c: purple;
    accent-color: var(--c);
}

option:checked {
    background: var(--c);
    color: #fff;
}

编辑器加载中

格式化

            
                1
2
3

            
            [document.documentElement.style].forEach(a => ["red,blue,purple,pink,gray,green,yellow".split(',')].forEach(b => setInterval(() => {
    a.setProperty("--c", b[~~(Math.random() * b.length)])
}, 300)))

编辑器加载中

预览

控制台