CODEWITHSUNDEEP
javascripthtmlcssreactjs
liam xu
liam xu

Reputation: 3030

How to remove the button border in css?

Below is my jsfiddle. https://jsfiddle.net/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? enter image description here enter image description here

Upvotes: 2

Views: 12560

Answers (3)

Atara
Atara

Reputation: 3569

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;

Upvotes: 0

VXp
VXp

Reputation: 12098

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

Upvotes: 7

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

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.

Upvotes: 0

Related Questions