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

Issues with hover functionality in React Material Design Icons have been identified

Having trouble with Viewport CSS being restricted by Blogger?

Which Javascript/Css/HTML frameworks and libraries would you suggest using together for optimal development?

Is there a way to ensure the collapsible item stays in its position?

Arrange the icons in multiple rows to ensure an equal distribution of icons on each row

Resize Pictures in Carousel for Smartphones

Issue with connecting Drupal 8 theme styling to website pages

What is the process for implementing a third-party component in my web application?

Is there a way to show textboxes stacked on top of each other without causing them to

What is the best way to prevent a sticky element from scrolling along with the

Implementing a Radial Cursor with a Custom Background Image in JavaScript

Customized function enabling dynamic menu display based on varying screen dimensions

Tips for showcasing HTML as code tailored to certain programming languages

Google Map with rounded corners that have a transparent design

Using JQuery to switch out images that do not have an ID or class assigned

Utilize various CSS styles for individual sections within a multi-page website

Ensure your mobile site is optimized for full width display

Is there a more effective method for positioning items in a navigation bar other than using padding-left?

Issues with CSS not being applied when the page content exceeds the viewport

Personalize the color and icon of the checkbox marks in sapui5