带前缀的输入框

简介

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

带前缀的输入框

虚拟机中已提供了index.html和style.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 中练习更多实验来提升你的技能。