如何删除CSS中的按钮边框？

Question

下面是我的jsfiddle。 https://jsfiddle.net/xuhang1128/1wff2rqv/5/

主要代码如下。

.design2-statusMonitor {
  margin-top: 20px;
}
.design2-statusMonitor .list-group-item {
  display: inline-block;
  background-color: transparent;
  //border-right: 0.5px solid #CAD5E0;
  border-top: 1px solid #CAD5E0;
  border-bottom: 1px solid #CAD5E0;
  width: auto;
}
.design2-statusMonitor .list-group-item.selected {
  background-color: #2f749a;
}
.design2-statusMonitor .list-group-item:focus {
  outline: none;
}
.design2-statusMonitor .list-group-item:after {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  right: -6px;
  top: 43%;
  z-index: 2;
  background-color: white;
  border-top: 2px solid #CAD5E0;
  border-right: 2px solid #CAD5E0;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

下面是点击它时的屏幕截图。你可以看到，当我点击它时，背景颜色似乎没有完全填满按钮，左边和右边是否存在？当我点击下面的按钮时如何消除这个差距？

Answer 1

只需将border: none添加到：

即可

.design2-statusMonitor .list-group-item.selected {
  border: none;
}

Updated fiddle

但更好的解决方案是这样的：

.design2-statusMonitor .list-group-item.selected {
  border-top: none;
  border-right-color: #2f749a;
  border-bottom: none;
  border-left-color: #2f749a;
}

.design2-statusMonitor .list-group-item.selected:hover {
  border-right-color: #c0d5e0;
  border-left-color: #c0d5e0;
}

只是为了避免影响宽度。

Updated fiddle

Answer 2

将border-color元素的.list-group-item值设置为 .selected至transparent以获取以下元素选择器：

1. .design2-statusMonitor .list-group-item.selected:after
2. .design2-statusMonitor .list-group-item.selected

示例：

.design2-statusMonitor .list-group-item.selected:after {
    content: "";
    width: 9px;
    height: 9px;
    position: absolute;
    right: -6px;
    top: 43%;
    z-index: 2;
    background-color: #2f749a;
    border-top: 2px solid #CAD5E0;
    border-right: 2px solid #CAD5E0;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    border-color: transparent;
}

.design2-statusMonitor .list-group-item.selected {
    background-color: #2f749a;
    border-color: transparent;
}

Updated JSFiddle

注意：

我能看到的唯一一个问题就是你不会在视觉上将两个.selected兄弟元素直接分开的细节否定。