原生标签样式覆盖

• 在开发过程中，ue设计通常会与原生标签的样式不符，且原生标签也不是很好看，那么我们需要去覆盖原有样式
• 简单的div盒子样式不记录，记录一些稍微复杂的。

input:checked

• 单选框,通常需要覆盖选框

    <label>
        <input type="checkbox" value="position">内容内容内容
    </label>
    <label>
        <input type="checkbox" value="ss" checked=true>内容内容内容
    </label>

• 默认样式

• 期望样式

        /* 布局，对齐下 */
        label {
            display: flex;
            align-items: center;
        }

        /* 隐藏默认的小框 */
        label input[type=checkbox] {
            opacity: 0;
        }

        /* 加一个默认的icon */
        label::before {
            content: '';
            cursor: pointer;
            position: absolute;
            left: 0;
            width: 16px;
            height: 16px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIqADAAQAAAABAAAAIAAAAAB4uvI0AAABeElEQVRYCe2XIUwDQRBF/yxHqxBQHJDU1BZRAqnFoiEIEvAQBKbQhKBoCAIsFIWpAINDoikVJSFBIUighiYIMG16N8wubdNsWlTvgtgVezuze/N/XsYMoc/KnvBUq4F4n6uhpJRC8z5Hb73FqBNkznkUdexLYpOBiU4+tC/hUzGKk2M4uN2mhtcVqqMo5w0xodc7ERq/x1D2GDOmAyD38Y2kKKwaIvNHPOv7qIr4lxrBYjlHlVDke4oazQB3YIx7HrJK3/mMbPtNKQoTWqu8S49C4VKf/VbbiCQSOiHu6uYb1UZdvYQhEpXuXzrOiE3HEXFEbAJ27HrEEbEJ2LHrEUfEJmDHrkccEZuAHbse+d9EiFFrO5yxnYYaM4weKdTMpLdwzCkZcp5l3AxkHl1LpnBzvULNsEwsX3Hs9QVLQYASE+ICIm2MaMG5Ah/KPJoPS3xQXaFxWtmjna4R/TBT4HVxtyVk0hLGBv08hLym/aQIZw95utD1fgAYrF6hEvi44gAAAABJRU5ErkJggg==) no-repeat;
            background-size: 16px 16px;
        }

        /* 选中后换个icon */
        label:has(input[type=checkbox]:checked)::before {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIqADAAQAAAABAAAAIAAAAAB4uvI0AAACXklEQVRYCe2YTUhUURSAvzuOmbmwQBeKICFBEAjRlJDRoh/CRYsKJDCsVhEEUVrg2LJGdKObwihCItpUYC3ERWFJEZWLogGJghaRRUgUVNI4zu3c93gy82aYeTOOvkVzFvPeufe9c7577nn33DuKJNkS0UeV5pSGZmleldRV7NuYGIwGFMOvwuqaMa4cD6GIvqQ1YUdfqasKMDjVo85aIC0DesNCnGkBKVspgEU/Ci2z0BwwDYk4O3yBMM41SqKy0wLRinrT5pfoBPUWiF8AyX5LIMnRMPf/R0TKZHEYOAijJ2F10B2DVH1ZI9K1F3ZtFIhyiCdSHbu1ZQM5tBnaQxCLQ/ddn0BCjXBunz3mi2NSVGbc40/Xix6RhrXQL3kRFMsjz2Esmu40U4tnkE110LENyrNUoyqp14PtUF0Jk+/h8kQml5nbPIMc2w5n9sDVDli3Jt2YqZ6RA7C+Bj58g95RU0a8i2eQK0/g60/ZqDTAzePQVJvq5PRuaG2CH38E+A7Mzaf259I8g3ychc4RePsZ6qrhRqft2DjYL9uoIy3yZSzIF3IPvghwvuIZxBj+/htO3IJxScCqCjsfumWtCLfZbvvG4fWnfBHs5/MCMa/EZNQXHsCwTJXJi8Nb7QS+/RLuv7GNFvKbN4jj5Poz6JGE/PUXJt7B0COnp7BrjgqQ3ejDaXgsELmW7+xW7N6CI+IYLwaEsbVkEAdoqdcSiDuCpYhkjIictDzsGNyvFk+XA9aMNTWBIE+VQtZMH0SOnHLAmrRAXpxXsnug3wcMOW8yNNWroqZcLIqff0v8Ayd2jxYaVz4tAAAAAElFTkSuQmCC);
        }

自定义鼠标样式

cursor: url('data:image/vnd.microsoft.icon;base64,AAACAAEAICAAAAAAAACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAgBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFB5GMBooT5kaKE+ZGihPmRooT5kaKE+ZGihPmRooT5kaKE+ZGihPmRoo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'), default;

console.log

• console.log的样式diy
• 内容与样式以,分割
• 内容前加%c

console.log('%c12345678','font-size:100px;color:red;background:green;')