javascript - 如何删除CSS中的按钮边框?

标签 javascript html css reactjs

下面是我的 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);
}

下面是我点击它时的截图。大家可以看到我点击的时候,背景色好像没有完全填满按钮,左右边缘存在吗?单击下面的按钮时如何消除该间隙? enter image description here enter image description here

最佳答案

只需将 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

关于javascript - 如何删除CSS中的按钮边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47794298/

相关文章:

javascript - 某些类的 JS 对象之间的 Json

css - 如何制作与 <td> 大小相同的图像?

javascript - 如何在 Jquery 中制作不可见的 div 内容?

html - `justify-content` 属性不适用于嵌套的 flexbox

javascript - jQuery ReplaceWith 后查找 div 高度

javascript - ASP.NET Razor 页面中出现未终止的字符串常量错误

javascript - 按下回车键时提交表单

javascript - 投资组合过滤器

html - 要隐藏的 Swift 和 UIWebView 元素

javascript - meteor JS : Iron router on click button