简介
在这个实验中,我们将创建一个带有可视化、不可编辑前缀的输入框。通过使用CSS和HTML,我们将创建一个带有前缀和输入字段的容器元素。我们还将使用:focus-within
伪类选择器来相应地设置父元素的样式,在与输入字段交互时提供更好的用户体验。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在这个实验中,我们将创建一个带有可视化、不可编辑前缀的输入框。通过使用CSS和HTML,我们将创建一个带有前缀和输入字段的容器元素。我们还将使用:focus-within
伪类选择器来相应地设置父元素的样式,在与输入字段交互时提供更好的用户体验。
虚拟机中已提供了index.html
和style.css
。
要创建一个带有可视化、不可编辑前缀的输入框,请执行以下步骤:
display: flex
创建一个类名为.input-box
的容器元素。<input>
字段中移除边框和轮廓,并将它们应用于父元素,使其看起来像一个输入框。:focus-within
伪类选择器,以便在用户与<input>
字段交互时相应地设置父元素的样式。以下是HTML代码:
<div class="input-box">
<span class="prefix">+30</span>
<input type="tel" placeholder="210 123 4567" />
</div>
以下是CSS代码:
.input-box {
display: flex;
align-items: center;
max-width: 300px;
background: #fff;
border: 1px solid #a0a0a0;
border-radius: 4px;
padding-left: 0.5rem;
overflow: hidden;
font-family: sans-serif;
}
.input-box.prefix {
font-weight: 300;
font-size: 14px;
color: #999;
}
.input-box input {
flex-grow: 1;
font-size: 14px;
background: #fff;
border: none;
outline: none;
padding: 0.5rem;
}
.input-box:focus-within {
border-color: #777;
}
请点击右下角的“Go Live”以在端口8080上运行Web服务。然后,你可以刷新“Web 8080”标签页来预览网页。
恭喜你!你已经完成了“带前缀的输入框”实验。你可以在LabEx中练习更多实验来提升你的技能。