Question

由于某种原因，当我选择元素时，它们周围有一个绿色边框。我不知道为什么没有添加它，为什么它在那里，我所有按钮上的按钮甚至都认为它们是不同的类名。

我正在使用引导程序，所以我认为它在那里。我正在使用bootstrap中的col大小。

该图片来自id #box，但在删除按钮类上也显示绿色边框。

它出现在Chrome中，但没有出现在野生动物园中。

包括我的CSS文件

greenborder

#main-grid {
  align-items: flex-start;
  background-color: grey;
}

#sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 4rem;
}
#delete-button {
  float: left;
}

#selected-items {
  float: right;
  border: black 2px;
}
#main-search {
  align-items: flex-start;
}
#mainsearch {
  position: -webkit-sticky;
  position: sticky;
  top: 1rem;
}

#box {
  transition: transform 0.2s;
}

#box:hover {
  transform: scale(1.1);
}

#box h4 {
  color: grey;
  position: absolute;
  z-index: 999;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 10%; /* Adjust this value to move the positioned div up and down */
  text-align: center;
  width: 100%; /* Set the width of the positioned div */
}

.delete-button span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.delete-button {
  background: white;
  color: #fff;
  border: none;
  position: relative;
  width: 100%;
  height: 60px;
  font-size: 1em;
  text-align: center;
  padding: 0 2em;
  cursor: pointer;
  transition: 800ms ease all;
  outline: none;
}
.delete-button:hover {
  background: #913b27;
  color: white;
}
.delete-button:before,
.delete-button:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  background: #b73e1d;
  transition: 400ms ease all;
}
.delete-button:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}
.delete-button:hover:before,
.delete-button:hover:after {
  width: 100%;
  transition: 800ms ease all;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel='stylesheet' href='https://bootswatch.com/4/cosmo/bootstrap.min.css'>
    <title>Item Manager</title>

</head>
<body>
    <div id='app'></div>


    {% load static %}
    <script src="{% static "frontend/main.js" %}"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

<div className="col">
              <div className="row">
                {this.props.items
                  .filter(searchingFor(this.state.searchTerm))
                  .map(item => (
                    <div className="col-sm-4 col-md-2 col-lg-1" id="box">
                      <input
                        className="item-image"
                        type="image"
                        src={getImage(item.item)}
                        value={item.item}
                        onClick={() =>
                          this.selectItems(item.item, item.matches)
                        }
                      />
                    </div>
                  ))}
              </div>
            </div>

Answer 1

使用outline:none至:focus事件。

项目处于活动状态时出现不需要的绿色边框

1 个答案: