Below is my jsfiddle. /

the main code is below.

.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);
}

Below is the screenshot when I clicked it. You can see that when I clicked it, the background color seems not totally fill the button, the left and right edge existed? How to remove that gap when I clicked the button like below one?

Below is my jsfiddle. https://jsfiddle/xuhang1128/1wff2rqv/5/

the main code is below.

.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);
}

Below is the screenshot when I clicked it. You can see that when I clicked it, the background color seems not totally fill the button, the left and right edge existed? How to remove that gap when I clicked the button like below one?

• javascript
• html
• css
• reactjs

• 1 list-group-item.selected --> list-group-item:selected – me_ Commented Dec 13, 2017 at 13:38

3 Answers 3

Just add border: none to the:

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

Updated fiddle

But a better solution would be something like this:

.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;
}

Just to avoid affecting the width.

Updated fiddle

Set border-color values for .list-group-item elements with the class .selected to transparent for the following element selectors:

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

Example:

.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

Note:

The only issue I can see with this is the detail you'll negate to visually separate two .selected sibling elements that happen to occur directly next to each other.

in my case, border: none; did not work.

I used border-style: hidden; to hide the default border and then set my own style border: 1px solid #cccccc;