带前缀的输入框
创建一个带有可视化、不可编辑前缀的输入框。
使用
display: flex
创建一个容器元素。移除
<input>
字段的边框和轮廓。将它们应用于父元素,使其看起来像一个输入框。使用
:focus-within
伪类选择器来相应地设置父元素的样式,当用户与<input>
字段交互时。
<div class="input-box">
<span class="prefix">+86</span>
<input type="tel" placeholder="139 1234 5678"/>
</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;
}
这个技巧创建了一个带有不可编辑前缀的输入框,通常用于电话号码或其他需要标准化前缀的字段。