如何创建不受border-radius影响的上直下边框？适配谷歌日历输入框

我懂你的需求——要做出像谷歌日历那样的输入框下边框：笔直的一条线，完全不受元素圆角的影响。你现在直接用border-bottom的话，因为元素设置了border-radius，边框自然会跟着圆角弯曲，这就是问题的根源。

这里有个简单靠谱的方案，用伪元素来模拟下边框，彻底脱离元素圆角的限制：

.element {
  border-radius: 2px;
  border: none;
  /* 添底部内边距，避免伪元素覆盖输入内容 */
  padding-bottom: 8px;
  /* 让伪元素能相对于当前元素定位 */
  position: relative;
}

.element::after {
  content: '';
  /* 绝对定位到元素底部 */
  position: absolute;
  left: 0;
  bottom: 0;
  /* 设置边框的宽度和厚度 */
  width: 100%;
  height: 2px;
  /* 替换成你需要的边框颜色 */
  background-color: #2196F3;
  /* 可选：如果想还原谷歌日历那种"不完全贴合灰色框"的细节，就加上左右缩进 */
  /* left: 2px;
  right: 2px; */
}

为什么这个方法能解决问题？ #

• 伪元素是独立的“虚拟元素”，它的形状不会被父元素的border-radius影响，所以能保持笔直的横线。
• 通过绝对定位精准贴在输入框底部，完美模拟下边框的视觉效果。
• 可选的左右缩进设置，还能还原你注意到的谷歌日历细节，完全匹配需求。

如果需要在输入框获取焦点时才显示这个边框，只需要把伪元素的样式写在.element:focus::after里就可以啦！

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