Button styles that have been verified will not be shown in Firefox

Question

Button styles that have been verified will not be shown in Firefox

Hello, first time poster here!

Client specifications for CSS:

button {
  border: 1px solid #B8B7B8;
  border-radius: 8px;
  height: 4em;
  margin: 25px 2px 25px 0;
  text-align: center;
  text-decoration: none;
  width: 4em;
}

button:active,
button:checked,
button:focus,
button:hover {
  box-shadow: 0 0 0 1.5pt #068985;
  -moz-box-shadow: 0 0 0 1.5pt #068985;
  outline: none;
}

<button type="button">Button</button>

The buttons are standard HTML <buttons></button>s.
They function properly on other browsers, but I am facing an issue with Firefox.

Is there a way to maintain the border of a clicked button?
The :hover state works fine but not much else. I have scoured the internet for a solution without luck.

Thank you in advance!

Side challenge - If anyone can help me create spacing between the button and its custom outline when selected, I will dedicate a blog post to you!

css firefox button

Answer 1

Answer №1

To implement a checked feature on click, you can simply add a class to the button (or div for spacing). Additionally, to create space between the button and a custom outline, you can add a parent div and apply border styles to it.

For a working example, please refer to this jsfiddle: https://jsfiddle.net/ajm5wnos/32/

var checked=false;

document.getElementById("myButton").addEventListener("click", (elem)=>{
  event.target.parentNode.classList.remove("checked");
    checked= !checked;
if(checked){
  event.target.parentNode.classList.add("checked");
  }
})

button {
  border: 1px solid #B8B7B8;
  border-radius: 8px;
  height: 4em;
  text-align: center;
  text-decoration: none;
  width: 4em;
}

#buttonParent{
  padding:2px;
  display:inline-block;
  border-radius: 8px;
}

.checked{
  padding:2px;
  display:inline-block;
  border-radius: 8px;
  box-shadow: 0 0 0 1.5pt #068985;
  -moz-box-shadow: 0 0 0 1.5pt #068985;
  outline: none;
}
#buttonParent:active,
#buttonParent:focus,
#buttonParent:hover {
  box-shadow: 0 0 0 1.5pt #068985;
  -moz-box-shadow: 0 0 0 1.5pt #068985;
  outline: none;
}

<div id="buttonParent">
  <button type="button" id="myButton">Button</button>
</div>

Thank you.

Answer 2

To implement a checked feature on click, you can simply add a class to the button (or div for spacing). Additionally, to create space between the button and a custom outline, you can add a parent div and apply border styles to it.

For a working example, please refer to this jsfiddle: https://jsfiddle.net/ajm5wnos/32/

var checked=false;

document.getElementById("myButton").addEventListener("click", (elem)=>{
  event.target.parentNode.classList.remove("checked");
    checked= !checked;
if(checked){
  event.target.parentNode.classList.add("checked");
  }
})

button {
  border: 1px solid #B8B7B8;
  border-radius: 8px;
  height: 4em;
  text-align: center;
  text-decoration: none;
  width: 4em;
}

#buttonParent{
  padding:2px;
  display:inline-block;
  border-radius: 8px;
}

.checked{
  padding:2px;
  display:inline-block;
  border-radius: 8px;
  box-shadow: 0 0 0 1.5pt #068985;
  -moz-box-shadow: 0 0 0 1.5pt #068985;
  outline: none;
}
#buttonParent:active,
#buttonParent:focus,
#buttonParent:hover {
  box-shadow: 0 0 0 1.5pt #068985;
  -moz-box-shadow: 0 0 0 1.5pt #068985;
  outline: none;
}

<div id="buttonParent">
  <button type="button" id="myButton">Button</button>
</div>

Thank you.

Button styles that have been verified will not be shown in Firefox

Answer №1

Similar questions

Is there a way I can maintain the active state after clicking on a link?

Can you tell me the proper term for the element that allows CSS properties to be changed after a link has been clicked?

Using the mpdf addPage function generates new empty pages

The sole focus is on the animation within the div

I'm having trouble getting the second controller to function properly in my AngularJS application

How to apply gradient colors to borders using CSS

Customize Swiper js: How to adjust the Gap Size Between Slides using rem, em, or %?

In the desktop view, padding, margins, and shadows mysteriously vanish, yet magically reappear when inspected. This bug stubbornly remains

Tips for stopping a Python loop once a media file has finished playing

Troubleshooting Problems with Image Width in CSS Styles

What is the best method to remove the x and up/down arrow components of an input date field?

How to target specifically images contained within anchor elements using jQuery?

The most sophisticated method for creating a 2x2 grid of divs

Struggle with typescript integration with emotion and styled components

Issue with alignment of Bootstrap inline form field on top and bottom levels

Issue with loading the main.css file

There appears to be an issue with the onmousemove function

Setting fixed width for table headers in Bootstrap 3

Tips for displaying only one image when clicked and hiding other divs:

Embed video with a custom thumbnail in an iframe