带前缀的输入框
创建一个带有可视化的、不可编辑的前缀的输入框。
- 使用
display: flex
创建一个容器元素。 - 从
<input>
字段中移除边框和轮廓。将它们应用于父元素,使其看起来像一个输入框。 - 使用
:focus-within
伪类选择器,在用户与<input>
字段交互时相应地为父元素设置样式。
<div class="input-box">
<span class="prefix">+30</span>
<input type="tel" placeholder="210 123 4567"/>
</div>
.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;
}