时间戳

首页 > 解决方案 > CSS Bootstrap 自动对焦 CSS

css - CSS Bootstrap 自动对焦 CSS

问题描述

我正在尝试使用带有 React 的引导程序来渲染大按钮网格。

我有用于悬停和焦点效果的 CSS。当用户加载屏幕时，我希望将其中一个按钮加载为焦点。我尝试将自动对焦放在 div 中。它可以完成这项工作，但是有一个奇怪的格式问题。在我的常规边框顶部呈现一些细白边框。我无法弄清楚确切的问题以及当用户加载屏幕时如何不显示这个白色细边框。

我的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 加载时的样子： 在此处输入图像描述

标签： cssreactjsbootstrap-4

解决方案

outline: none !important;请在选择器上添加 CSS .about-btn-box button:-

.about-btn-box button{outline: none !important;}

推荐阅读