如何实现无圆角底部边框的Fluent风格输入框并解决聚焦布局偏移

针对你需求的两个核心点（底部无圆角、聚焦时底部边框变化不偏移），可以通过以下修改实现：

核心修改思路 #

• 移除底部圆角：调整border-radius属性，仅保留左上和右上圆角。
• 消除布局偏移：通过固定元素高度、调整边框宽度总和保持不变的方式，让聚焦时边框高度变化不影响整体布局。

修改后的完整代码 #

CSS代码 #

body {
  background-color: #1a2228;
}

input {
  box-sizing: border-box; /* 确保边框/内边距计入元素尺寸 */
  background: #272f36;
  border: 1px solid #282d31;
  border-radius: 3px 3px 0 0; /* 仅左上、右上保留圆角，底部无圆角 */
  width: 10em;
  line-height: 1.5em;
  height: calc(1.5em + 2px); /* 固定高度：行高 + 初始上下边框总高度(1px+1px) */
  outline: none;
  color: white;
  border-bottom-color: #979a9e; /* 单独设置底部边框颜色 */
  padding-left: 5px;
  transition: all 200ms;
}

input::placeholder {
  color: #aeaeae;
  transition: color 200ms;
}

input:hover {
  background: #2d343b;
}

input:focus {
  background: #1d1f21;
  border-top-width: 0; /* 顶部边框宽度设为0 */
  border-bottom-width: 2px; /* 底部边框宽度设为2px，总边框高度仍为2px，不改变元素高度 */
  border-bottom-color: #4cc2ff; /* 聚焦时底部高亮蓝色 */
}

input:focus::placeholder {
  color: #959697;
}

input[type='number']::-webkit-inner-spin-button {
  cursor: pointer;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

HTML代码 #

<input id='a' type='number' min='0' max='100' placeholder='test'>

关键修改说明 #

1. box-sizing: border-box：让元素的宽度和高度包含边框和内边距，避免边框变化导致尺寸波动。
2. 固定高度height: calc(1.5em + 2px)：保证元素初始高度等于行高加上上下边框的总高度，聚焦时调整上下边框宽度（0+2px），总高度不变，彻底消除布局偏移。
3. border-radius: 3px 3px 0 0：精准控制圆角位置，实现底部无圆角的效果。
4. 聚焦时的边框调整：通过顶部边框宽度抵消底部边框增加的宽度，既实现了底部边框变粗的视觉效果，又不改变元素总尺寸。

内容的提问来源于stack exchange，提问作者syesjohnny