Autofocus Styling with CSS Bootstrap

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

Answer №1

To improve accessibility, remember to include the CSS rule outline: none !important; for the .about-btn-box button selector:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`How can I effectively integrate react-i18next with the Semantic UI label element?`

Currently, I am working with Semantic UI along with the integration of [react-i18next][2]. My goal is to enable translation for label strings, but these labels include HTML tags, such as span. Unfortunately, the system only allows hardcoded or variable s ...

Exploring innovative CSS/Javascript techniques for creating intricate drawings

When using browsers other than Internet Explorer, the <canvas> element allows for advanced drawing. However, in IE, drawing with <div> elements can be slow for anything more than basic tasks. Is there a way to do basic drawing in IE 5+ using o ...

Is it possible to change the hover highlight rotation on a link without affecting the surrounding elements?

Is it possible to rotate the highlight on a link when hovered? I'm new at this, so apologies if this question seems basic. This is how my css/html is currently structured: .links { display: block; } .links a { color: #000000; text-decoratio ...

When using Ruby and Rack on Heroku to serve a static site, the CSS styling may not be

Trying to deploy a static site consisting of HTML, CSS, font, and image files with Ruby Rack has been a bit challenging. While the HTML displays perfectly in Chrome when running it locally, the CSS assets do not seem to be loading or being applied to the H ...

Unable to click on the icon when modifying Mui Text Field

Utilizing the MUI Text Field component, I have successfully added a select prop to transform it into a dropdown list with values and an icon. However, I encountered an issue while attempting to change the default dropdown icon to a custom one from Figma. D ...

What steps can be taken to avoid the table row from getting hidden behind the table header?

I am aiming to implement sticky headers for a table using only CSS. You can refer to this link for guidance: Table fixed header and scrollable body Everything looks good when the page loads, but as soon as I start scrolling, a sliver of data appears abo ...

How come I'm not receiving an error message when I enter an incorrect email or password?

Whenever I try to log in with the wrong password and email, no error message is displayed. Instead, it simply logs me in and takes me to the main page. Can someone please assist me in implementing an error message display for incorrect login details? imp ...

CSS Accordion Collapse Widget

I currently have a CSS collapse accordion created using pure CSS, and it is functioning perfectly. However, I am facing one issue: When the user clicks on any label - Label One, Label Two, or Label Three, they are unable to close it by clicking on the sam ...

Expanding on the specific properties of a parent component to its child, using SASS's extend feature

Can selected or specific properties be shared/extended from the parent to the child without the need to create a variable? .main-container { padding: 20px; margin: 20px; ul { padding:$parentPadding(); margin: 0; } ...

The sticky position is malfunctioning even when there is no parent element with the overflow hidden property

// observer for feature section let featuresSection = document.querySelector('#featuresSection'); let callbackFeature = (items) => { items.forEach((item) => { if (item.isIntersecting) { item.target.classList.add("in ...

Is it possible to verify with Jest that ReactDOM.render has been called if it's enclosed in a conditional statement?

I have a React component that conditionally calls ReactDOM.render when root === true to satisfy flow: import React from 'react' import ReactDOM from 'react-dom' import App from './App' const root = document.getElementById(& ...

Having trouble removing lines from Router Link? Unfortunately, using style={{'textDecoration': 'none'}} doesn't seem to be doing the trick

Does anyone know why the text decoration is not working on my link when I use text-decoration none? Any solutions or suggestions would be greatly appreciated. Thank you in advance! Navbar.js file import React,{useState} from "react"; import { mak ...

Utilize JavaScript to randomly choose images as background tiles in HTML

Currently, I am in the process of developing a game using HTML/CSS/JavaScript. My background is currently set to a single image (100px / 100px) being repeated vertically and horizontally to tile across the entire page body; CSS: body { background-ima ...

Encountering issues when trying to incorporate SASS and CSS libraries in NextJS

I have been attempting to integrate the wix-style-react plugin into my NextJS project, but I am encountering difficulties when trying to build. According to their documentation, they utilize Stylable, SASS, and CSS Modules. After installing the plugin and ...

Encountering issues when attempting to post JSON form data to a REST API via AJAX within a React

Recently, I created a basic SignUp page utilizing React and I am looking to transmit the form data to a REST API. In my setup, I have incorporated react.min.js, react-dom.min.js, and jquery.min.js. Here is the code snippet: <div id="container"></ ...

Tips for personalizing react-show-more text length with Material-UI Icons

In my SharePoint Framework webpart using React, I am currently utilizing the show more text controller. However, I am interested in replacing the "Show More" and "Show Less" string links with the ExpandMore and ExpandLess Material UI icons. Is there a way ...

How to display only the thumbnail on WordPress archive page and remove the post excerpt

I am currently in the process of revamping my category archive to resemble a grid layout by utilizing custom CSS. I have successfully eliminated the elements I desired using code like this: .archive .entry-footer { display: none; } Now, I only have t ...

Troubles with aligning and floating three divs in the center of a container div – a CSS conundrum illustrated with code snippets and a basic diagram

I'm struggling to center 3 divs within a "container." Here's a rough idea of what I'm going for: ______________________ | ___ ___ ___ | | |___| |___| |___| | |______________________| The issue I'm facing is g ...

What is the most efficient way to define the font properties for all H1-H6 headings in a single declaration

Is there a way to set all font properties for H1-H6 headings in one CSS declaration? CSSLint.net is flagging multiple definitions of heading styles as an issue. I currently have specific styles for each heading level: h1 { font-size: 1.8em; margin-top: ...

Floating elements and Internet Explorer compatibility

In my code, I have two divs that are floating correctly in Chrome, Firefox, and Safari but not in Internet Explorer. In IE, the right div appears below the left div even though it should be floated to the right. Both of these divs are wrapped by an outer ...