带前缀的输入框

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个实验中,我们将创建一个带有可视化、不可编辑前缀的输入框。通过使用CSS和HTML,我们将创建一个带有前缀和输入字段的容器元素。我们还将使用:focus-within伪类选择器来相应地设置父元素的样式,在与输入字段交互时提供更好的用户体验。

带前缀的输入框

虚拟机中已提供了index.htmlstyle.css

要创建一个带有可视化、不可编辑前缀的输入框,请执行以下步骤:

  1. 使用display: flex创建一个类名为.input-box的容器元素。
  2. <input>字段中移除边框和轮廓,并将它们应用于父元素,使其看起来像一个输入框。
  3. 使用: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中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程