如何解决当按钮处于悬停状态或活动状态时,边框变黑
该按钮通常看起来不错,但是当我单击该按钮时,该按钮周围会出现黑色边框。
我尝试使用border:none,但无法正常工作。
在我的网页的屏幕截图中,您可以清楚地看到该按钮没有边框:但是单击时仍显示边框
@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,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。