css之选择器、无需改变html结构的自定义校验标识符星号、输入框聚焦修改父元素样式、设置已选择的文字样式、首字符下沉、focus-within、first-letter、selection、has

MENU

• form表单
• 首字符下沉
• selection
• first-letter
• has(+input[data-required])
• focus-within

form表单

效果图

html

<div class="form-container">
    <div class="form-block">
        <label class="label">
            <span>姓名</span>
            <input type="text" class="txt" data-required>
        </label>
    </div>
    <div class="form-block">
        <label class="label">
            <span>地址</span>
            <input type="text" class="txt">
        </label>
    </div>
    <div class="form-block">
        <label class="label">
            <span>电话</span>
            <input type="text" class="txt" data-required>
        </label>
    </div>

    <button class="btn type_1">提 交</button>
</div>

style

.form-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: start;

    .form-block {
        width: 268px;
        padding: 8px 16px;
        box-sizing: border-box;
        border-radius: 2px;
        transition: 0.5s;

        .label {
            display: flex;

            >span {
                flex: 2;
            }

            >span:has(+input[data-required])::after {
                content: '*';
                color: #ff0000;
            }

            .txt {
                flex: 5;
                line-height: 20px;
                padding-left: 8px;
                padding-right: 8px;
                box-sizing: border-box;
                border: 1px solid #afafaf;
                border-radius: 2px;
            }

            .txt:focus {
                outline: none;
                border-color: #409eff;
            }
        }
    }

    .form-block:focus-within {
        background-color: #eeeeee;
    }

    .btn {
        line-height: 28px;
        margin-top: 16px;
        background-color: transparent;
        border: none;
        border-radius: 2px;
        outline: none;
        cursor: pointer;
    }

    .btn.type_1 {
        background: #409eff;
        color: #ffffff;
    }

    .btn.type_1:hover {
        background: #73b8ff;
    }

    .btn.type_1:active {
        background: #0d84ff;
    }

    .btn.type_1:disabled {
        background: #73b8ff;
        color: white;
    }
}

JavaScrip

function init() {
    const spanAll = document.querySelectorAll('.label span');
    const btn = document.querySelector('.btn');
    let maxW = 0;

    spanAll.forEach(item => {
        let w = item.offsetWidth;

        if (maxW < w) maxW = w;
    });

    btn.style.marginLeft = `${maxW + 16}px`;
}

init();

首字符下沉

效果图

html

<p class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque omnis quam tenetur eveniet cum iste aperiam.
    Blanditiis repellendus molestias aliquam. Nihil nulla similique doloremque assumenda enim quasi quo modi
    voluptatem.
    Cupiditate fugiat atque vero, ea ipsum facere itaque. Saepe nesciunt, dignissimos facere eveniet magni veniam,
    aspernatur ipsa, possimus molestiae consectetur eos iure accusantium ea reprehenderit aliquid illo. Pariatur,
    odio quae.
</p>

style

.content {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0px 16px;
    box-sizing: border-box;
}

.content::first-letter {
    float: left;
    line-height: 1;
    margin-right: 10px;
    font-size: 4em;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
    text-transform: uppercase;
}

.content::selection {
    background-color: #ececec;
    color: #333333;
    text-decoration: underline;
}

selection

null

first-letter

null

has(+input[data-required])

null

focus-within

null