Currently, I am working on creating a grid of large buttons using React and Bootstrap. I have implemented CSS for hover and focus effects on these buttons.
My main issue arises when I try to load the screen with one button already focused. I attempted to use the autofocus attribute within the div, and while it successfully focuses the button, it introduces a strange formatting problem. A thin white border appears on top of my regular borders, which is not the desired outcome.
Here is a snippet of my 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>
....
Additionally, here is a portion of my CSS file:
.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;
}
...
I am looking to remove the unwanted white outer borders while still maintaining the autofocus functionality on the loaded button.
Desired appearance upon loading with autofocus: https://i.sstatic.net/fwAKF.png