css - 项目处于活动状态时不需要的绿色边框
问题描述
出于某种原因,当我选择元素时,我的元素周围有一个绿色边框。我不知道为什么它在那里,因为我没有添加它,而且它在我所有的按钮上,甚至认为它们是不同的类名。
我正在使用引导程序,所以我认为它在那里。我正在使用引导程序中的 col 大小。
图片来自 id #box,但绿色边框也显示在删除按钮类上。
它出现在 Chrome 中,但没有出现在 Safari 中。
生病包括我的css文件
#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>
解决方案
用于outline:none
事件:focus
。
推荐阅读
- npm - 使用 npm 安装包时出现问题
- amazon-web-services - 基于其他 lambda 是否正在运行的 AWS Lambda 动态并发限制
- r - 在 R 中重塑数据框:从宽到长,但“变化”列的长度不相等
- bash - 带有时间戳开始到时间戳结束位置的 GnuPlot 作为作业调度图的 x
- python - 从 tf.data.Dataset 应用过滤器后获取数据集的大小
- android - Android Room Student + School(一对多关系)获取学校名称
- android - 我将如何使用 kotlin 在 android 上设置按钮的背景
- php - PHP动态获取类构造函数并调用它来创建一个新实例
- php - Laravel 7 - 仅服务于根页面的服务器
- sql-server - 如何在从日期到日期列到单列的日期之间获取