Removing Firefox's button outline when the mouse is pressed, not clicked, hovered over, or focused

Is there a way to remove the default outline that appears on my Bootstrap page button when it is pressed and not released? I have already tried targeting mouse focus and active states, but haven't been successful.

Default Button

https://i.sstatic.net/gpvJN.jpg

When Mouse Pressed and Not Released

https://i.sstatic.net/HFuW7.jpg

HTML

<input type="button" class="advancedSearch btn" value="Advanced Search" />

CSS

.advancedSearch, .advancedSearch:focus {
  outline: none;
  background-color: #e9ece5;
  font-family: Arial, Times, serif;
  color: #333333;
  height: 35px;
}

Answer №1

Why not give this a shot? It may just be the solution you're looking for.

.customSearch, .customSearch:focus {
  outline: none !important;
  background-color: #e9ece5;
  font-family: Arial, Times, serif;
  color: #333333;
  height: 35px;
}

Feel free to check out the link to see it in action

Answer №2

.searchForm::-moz-focus-inner {
  border: none;
}

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

Obtain data with matching JSON values in a REACT application

Recently, I received a JSON file that looks something like this: [ { "symbol": "A", "name": "Agilent Technologies Inc", "exchange": "NYSE", }, { "symbol": "AAC ...

The Google Language Translator disregards the formatting

Currently, I am in the midst of developing a website with Wordpress and have successfully integrated Google Language Translator. Everything seems to be working well, except for one issue - when I translate the content, it alters the font size. Prior to tra ...

The background color is failing to respond to the padding of the adjacent image

Check out this page to see the issue. The code snippet surrounded by pre tags has a background-color that is not aligning properly with the image, even though the image has a defined padding of 16 pixels on the right. The text alignment is correct, but the ...

Setting up a Node.js project in your local environment and making it

I need help installing my custom project globally so I can access it from anywhere in my computer using the command line. However, I've been struggling to make it work. I attempted the following command: npm install -g . and some others that I can&ap ...

When converting HTML to PDF using Dompdf, Font Awesome icons may not appear as expected

I am currently using Dompdf for exporting an HTML page to PDF. The issue I am facing is that when the HTML file contains Font Awesome icons, in the resulting PDF there are question marks instead of the icons. Below is a snippet of the HTML code: <!DOC ...

What could be causing my ul list to not be populated by ajax?

To populate the ul list with data from PHP code on page load, you can use the following ajax function. I appreciate any help in advance, and please forgive me if my explanation is not precise as I'm new here. This post contains mostly code snippets. ...

I'm not entirely sure why I keep getting the error message stating "Cannot read property 'innerHTML' of null"

Having an issue with my JavaScript code where I am trying to insert a new table row into the HTML but keep getting an error message that says "Uncaught TypeError: Cannot read property 'innerHTML' of null" <!DOCTYPE html> <html lang=" ...

What is the method for aligning the cursor in a text input field with a placeholder in Edge without using JavaScript?

Does anybody have a solution for making this work in all browsers, except for Edge? I'm looking for a pure CSS workaround. input { text-align: center } <input placeholder="placeholder" /> ...

issue with jquery fade toggle not working properly on Bootstrap website

My website is built using Bootstrap and jQuery. I am facing an issue where the fadeToggle() function on a div element is not displaying properly - it remains hidden all the time. Can anyone provide insight into what might be causing this problem, or sugg ...

Collapse in Bootstrap without any Animation

How can I add animation to the Bootstrap Collapse feature on my website? I am using an icon from the Font Awesome library to trigger the collapse effect, but currently, it just pops up without any animation. What could be causing this issue? You can view ...

Are MVC Controllers fundamental components in a Node.js application, or just another piece of the puzzle?

Currently, I am in the process of developing a web crawler using Node. This project aims to crawl through my different bank accounts and generate a quick summary of my financial situation. Although I am fully aware of the security concerns involved in this ...

Text within Twitter Bootstrap colliding with each other

I am having trouble creating a large text header for my website using Twitter Bootstrap. The span12 column is not adjusting to the size of the text as I would like it to. When I resize the browser window, instead of the text wrapping onto a new line, the ...

Positioning elements in CSS using percentages allows for flexible and responsive

I am new to web design and I am trying to create a webpage similar to the one shown in this image. However, I want to set the height and width of the divs using percentage values instead of pixels. Whenever I attempt this, the boxes end up overlapping or ...

The error message "Cannot access property 'findAll' of undefined in expressjs" is displayed

An issue has occurred with ExpressJS: TypeError - Cannot read property 'findAll' of undefined. It seems that all Sequelize functions are not working correctly. Numerous errors are popping up, such as "Cannot read property 'sequelize method& ...

What is the best way to utilize the "Enter" key on the keyboard to set state in my component?

I'm a novice when it comes to ReactJs Es6, I am attempting to update the state of my component when the "Enter" Button is pressed. Despite trying various solutions, such as the one mentioned in this answer, I still have not been able to achieve the de ...

The git clone operation encounters a problem with the error message: unable to connect, connection refused on localhost port 80

Currently for my project, I'm utilizing isomorphic-git. However, when I try to implement the git.clone function, I encounter the error message Error: connect ECONNREFUSED 127.0.0.1:80. To provide an example of what I am attempting to achieve: import ...

The modal fails to display when the content is positioned below a setInterval function

i have created a notification system using ajax currently, I am attempting to open a modal by clicking on the content of the notification with setInterval the modal works perfectly when the content of my notification is not being updated via setInterval. ...

Improper comment placement in Rails with AJAX and JQUERY

I am developing a "comment system without page refreshing" using Jquery and Ajax. Within posts/show.html.erb <%= @post.title %> <%= @post.body %> <%= render 'comment %> posts/_comment.html.erb <%= link_to "Add Comment", new_po ...

Loading text not displaying in Angular 2 mobile app

I have developed an angular2 application using typescript that relies on SystemJS. My starting point was this seed app I found. When viewed on a desktop, you can observe the loading text enclosed within tags (e.g. Loading...). On the index page of my app ...

Unable to retrieve the previous state data in AngularJS upon clicking the back button in the browser

Currently, I am developing a web application using AngularJs. One issue that I am facing is related to filtered data. After applying specific parameters through checkboxes and radio buttons to filter the data, I navigate to another state. However, when th ...