html - 当按钮处于悬停状态或活动状态时出现黑色边框
问题描述
按钮看起来正常,但是当我单击按钮时,按钮周围出现黑色边框。
我试过边界:无,但它不工作。
在我的网页截图中,您可以清楚地看到该按钮有边框:无但点击时仍然有边框
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.quiz-container {
background-color: #fff;
width: 600px;
max-width: 600px;
border-radius: 10px;
box-shadow: 0 0 10px 5px rgba(100, 100, 100, 0.2);
overflow: hidden;
}
.quiz {
padding: 4rem;
}
ul {
list-style: none;
padding: 0;
}
ul li {
font-size: 1.2rem;
margin: 1rem 0;
}
button {
background-color: #457b9d;
border: none;
color: white;
cursor: pointer;
display: block;
padding: 2rem;
width: 100%;
font-family: inherit;
font-size: 1.1rem;
}
button:hover {
background-color: #457b9d;
border: none;
}
button:active {
background-color: #1d3557;
transform: translateY(4px);
border: none;
}
<h1>Quizteama Aguilera</h1>
<div class="quiz-container">
<div class="quiz">
<h2 id="question">Question text</h2>
<ul>
<li>
<input type="radio" id="a" name="answer" />
<label id="a_text" for="a">answer</label>
</li>
<li>
<input type="radio" id="b" name="answer" />
<label id="b_text" for="b">answer</label>
</li>
<li>
<input type="radio" id="c" name="answer" />
<label id="c_text" for="c">answer</label>
</li>
<li>
<input type="radio" id="d" name="answer" />
<label id="d_text" for="d">answer</label>
</li>
</ul>
</div>
<button id="submitButton">Submit</button>
</div>
解决方案
推荐阅读
- javascript - 将道具传递给子组件时如何避免未知道具错误?
- javascript - 过滤2个数组在相等时不返回空
- vba - 尽管检查为 FALSE 且 [value_if_false] 为 0 或 1,但 IF 语句错误
- sql-server - SQL Server 的虚拟服务器和物理存储
- python - 如何使用 OR 条件合并两个 pandas 数据框
- javascript - 正则表达式删除数字和其他字符
- neural-network - 人工神经网络感知中零输入偏差的含义
- python - TKinter & Python:如何给进程名称?
- python-3.x - Tensor("pow:0", ...) 必须与 Tensor("Cast_2:0", ...) 来自同一个图
- java - Declaring dependency on Mockito using Maven/pom.xml in IntelliJ IDEA