如何通过纯CSS实现表单行的完全圆角左侧边框？

云上老周

2026-8-2

问题解决：仅用CSS实现左侧药丸形标记

问题背景

我正在重做应用中的部分UI，希望将当前样式替换为目标样式。现有HTML和CSS代码如下，添加div并设置为药丸形状的方案需要修改大量代码，因此更希望通过CSS实现。我了解到可使用::after等伪元素，但不确定能否仅通过CSS达成目标。

当前HTML代码

<div class="row required"><label for="NumericFieldStartKm-numericfield">Kilometer at start</label><input id="NumericFieldStartKm-numericfield" value="" class="required numbercontrol mbsc-comp" min="1" max="" readonly=""></div>

当前CSS代码

.row.required { border-left: 7px solid #C30000; padding-left: 7px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; margin-left: 4px !important; }

解决方案

可以通过伪元素::before实现需求，无需修改HTML结构，具体代码如下：

圆形标记实现

.row.required {
  position: relative;
  padding-left: 24px; /* 为左侧标记预留空间 */
  margin-left: 4px !important;
  /* 移除原有左侧边框样式 */
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.row.required::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  width: 12px;
  height: 12px;
  background-color: #C30000;
  border-radius: 50%; /* 圆形效果 */
}

药丸形（椭圆）标记实现

如果需要椭圆药丸效果，调整伪元素的宽高和圆角即可：

.row.required::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 8px;
  background-color: #C30000;
  border-radius: 4px; /* 椭圆圆角 */
}