CSS引导AutoFocus CSS
CSS引导AutoFocus CSS
提问于 2021-06-14 10:48:50
我正在尝试渲染一个网格的大按钮使用引导与反应。
我有悬停和聚焦效果的css。当用户加载屏幕时，我希望将其中一个按钮作为焦点加载。我试着把自动对焦放进电视里。它完成了工作，但是存在一个奇怪的格式化问题。一些薄薄的白色边框在我的常规边框上呈现。当用户加载屏幕时，我不知道确切的问题以及如何不显示这个白色的细边框。
我的html：
<div className='container '>
<div className='row'>
<div className='col-md-6 about-btn-box ' >
<button
className='p-3 flexbox' autoFocus>
<h4 > AAA </h4>
<p>
sdadsasd dasdsa dadasd asddaads dasdasdas
</p>
</button>
....我的CSS文件：
.about-btn-box {
margin-top: 20px !important;
margin-bottom: 20px !important;
text-shadow: none;
padding-bottom: 100px !important;
color: whitesmoke !important;
border-top:10px solid transparent!important ;
border-left:10px solid transparent!important ;
border: transparent !important;
}
.flexbox{
border: transparent !important;
display:flex;
top: 5px;
justify-content:top;
align-items: left;
flex-flow: column;
}
.about-btn-box button {
background-color:transparent !important;
border-radius: 5px;
border:none;
height: 170px;
color: whitesmoke;
border-top:10px solid transparent!important ;
border-left:10px solid transparent!important ;
margin-bottom: 20px !important;
}
.about-btn-box h4 {
color: whitesmoke;
display:inline-block;
vertical-align:text-top;
font-family: "Montserrat" !important;
font-size: 18pt !important;
text-shadow: none;
}
.about-btn-box p {
align-items:baseline;
display:inline-block;
vertical-align:text-top;
text-align: left;
align-items : left;
font-size: 12.5pt !important;
font-weight: 500 !important;
font-family: "Montserrat" !important;
text-shadow: none;
}
.about-btn-box button:focus {
border-left:10px solid red!important ;
border-top:10px solid red!important ;
background-color: rgb(26, 26, 36) !important;
}
.about-btn-box button:active {
border-left:10px solid red!important ;
border-top:10px solid red!important ;
background-color: rgb(10, 11, 22) !important;
}
.about-btn-box button:hover {
border-top:10px solid red!important ;
border-left:10px solid red!important ;
transition: all 200ms linear !important;
}
我想摆脱白色的外部边框，但希望按钮加载自动对焦。
下面是我希望它与autoFocus一起加载时的样子：
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-14 11:17:49
请在outline: none !important;选择器上添加CSS outline: none !important; :-
.about-btn-box button{outline: none !important;}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67968907
复制相关文章
相似问题
腾讯云开发者
