What is the method to prevent the Submit Button from being active in CSS specifically on Firefox?

When I click this CSS in webpages on Chrome (OS: Windows), it works fine.

However, Firefox (OS: CentOS7) does not seem to apply this CSS on webpages. How can I resolve this issue?

Should I make adjustments in the CSS code below?

#submit .btn.btn-primary:before{
        visibility: visible;
        content: 'SubmitClicked';
        line-height: 1.2em;
        background-image: linear-gradient(180deg,#65a637,#5b9532);
        background-repeat: repeat-x;
        background-color: #65a637;
        border: 1px solid #4d7e2a;
        border-bottom-color: #4d7e2a;
        border-top-color: #4d7e2a;
        color: #fff;
        box-shadow: inset 0 1px 0 #69ac39;
        text-shadow: none;
        display: inline-block;
        padding: 4px 10px;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        border-radius: 4px;
       }

Your assistance is appreciated.

javascripthtmlcss

Answer №1

I'm a bit confused about the meaning of your question, but based on the title it seems like you could try setting the pointer event to none like this:

pointer-events: none;

This will essentially disable the button as there will be no interaction with the pointer, preventing clicks or other events on that button. This feature is supported in Chrome and Firefox 46 and above. If you want to create a visually disabled effect on the button, you can play around with the color or opacity settings.

Answer №2

Adjust the button padding to prevent any movement in Firefox browser

.btn.btn-primary{
  padding: 0;
}

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

CSS code preventing hyperlink from functioning

My website is almost complete, but I'm running into an issue with some hyperlinks on my event registration page. The first link works fine, but the second one does not. To troubleshoot, I created a test page with just the two links and still encounter ...

htmlasp.netcss

The scale line on the OpenLayers map displays the same metrics twice, even when the zoom level is different

When using the Openlayers Map scale line in Metric units, a specific zoom rate may be repeated twice during the zoom event, even though the actual zoom-in resolution varies on the map. In the provided link, you can observe that the zoom rates of 5km and ...

javascripttypescriptzoomingopenlayers

Loading/Adding JS script in an asynchronous manner

In my Laravel project, I am implementing templates for different pages based on a main page. Each page requires different JS scripts to function properly, so I created a template to import these scripts: <!-- jQuery 2.1.3 --> <script src="{{ URL: ...

javascriptjqueryajaxlaravel

Node.JS guide on handling geonames city information

While unconventional, I wanted to share my solution since there is a lack of information on how to accomplish this task on the stack. After searching for an easy-to-use Node.JS module to process geonames data into a mongo database, I found very few project ...

javascriptnode.jsmongodbobjectgeonames

Submitting form data to PHP without refreshing the page

I've been attempting to send form data, specifically an array, to a PHP file without having the page refresh. I've implemented AJAX for this purpose but it doesn't appear to be working as intended. Below you'll find the syntax of the fo ...

javascriptphpajaxforms

Display time series data from PHP by utilizing Flot Charts in jQuery

After receiving data from a database, which is formatted using PHP and returned as a JSON response for an Ajax call, I encountered an issue. Everything works fine and the data is plotted except when the X-Axis contains dates, in which case nothing gets plo ...

javascriptphpjqueryajaxflot

Is there a conventional method for implementing role-based access control for files in Angular?

I have built 4 projects in Angular that grant access to different roles. The dashboard consists of various content pages, with the initial page being the dashboard when a user logs in. The content displayed on the dashboard is determined by the logged-in ...

javascriptangularroles

Utilizing RequireJS with Laravel 4

I am trying to use require js and laravel to manage the assets directory. I have placed the require.js file in the assets/js directory, along with main.js. The main.js file contains: require.config({ baseURL: '', paths: { userPre ...

javascriptlaravelrequirejslaravel-4

Looking for a straightforward way to incorporate a "Read more" and "Show Less" functionality into a Wordpress site using Javascript?

As a last resort, I am seeking a quick and simple fix. I have been experimenting with Javascript to implement a 'Read more...' & '... Read Less' feature on six different sections of a single page. The goal is to display only the fi ...

javascriptphpjqueryhtmlwordpress

Error: Trying to access the 'commit' property of an undefined variable in Angular

I am currently working on a project that involves Angular and Spring Boot integration. The project retrieves parameters from the Spring Boot back-end through a DTO, and I display this information on the front-end screen. However, upon showing the dialog co ...

javascriptangularangular11

Checking for the presence of a certain key within an object containing arrays that are value-based rather than index-based, using a Javascript

As I've been exploring various code snippets to check for the presence of object keys within arrays, I came across some brilliant examples that have been really helpful... However, my current dilemma lies in dealing with a JSON response that requires ...

javascriptarraysjson

Cannot find property in type, and the parameter is implicitly of an unspecified type

I've been encountering this issue where I keep getting an error message. I attempted to resolve it by setting "noImplicitAny": false in tsconfig.json, but unfortunately that did not work. As for the 'Property does not exist on type' error, I ...

javascripthtmlangulartypescriptfirebase

Tips for transmitting form information in a fetch call

As I was developing a nodejs server, I encountered an issue with the POST call that involves sending form input data to a remote server. Despite everything else working fine, the form data was not being received by the server. Below is the code snippet in ...

javascriptnode.jsfetch

Pass user input values to PHP via AJAX and display the outcome on a designated div

I am currently working on a project where I need to send an input value to a PHP script and display the returned value in a div using AJAX. However, I seem to be struggling with getting it to work properly. Any assistance or suggestions would be greatly ap ...

phpjavascriptjqueryajax

Current recommended method for updating innerHTML with properly formatted text?

My understanding is that using innerHTML on an element can be risky, as malicious users could potentially inject harmful content such as <script> tags. This question shows there are multiple alternative tags, some of which are non-standard. In my s ...

javascripthtml

Filtering the inner ng-repeat based on the variable of the outer ng-repeat

I have a collection of elements. Some of these elements are considered "children" of other elements known as "parent" elements. Instead of rearranging the JSON data received from the server, I am attempting to filter the results within the ng-repeat loop. ...

javascriptangularjs

Transfer or duplicate an SVG image from the bottom div to the top div

Is there a way to move a div from the chart_div to the movehere div? I've tried duplicating it below the current svg, but I'm having trouble targeting just the header row ('g' element) specifically. Here is the HTML: <script type= ...

javascriptjqueryhtmlcsssvg

Add a sub-modal window inside a separate container

Is there a way to attach this modal to an external div? The current setup involves nesting it within a container that has a fixed height. I'm looking to move it outside of that container. Here is the JavaScript code for the modal: client.fetchQuery ...

javascriptjquerynode.js

How to send emails in the background using a React Native app

I'm looking to incorporate email functionality into a React Native app so that it can send messages automatically when certain actions occur in the background. ...

javascriptreactjsnative

Storing the value from the INPUT field in the state of React is not permitted

I'm attempting to retrieve the user input value from the INPUT field and update it in the corresponding state. However, no matter what I type in the field, it doesn't get set to the state. createForm(x){ var dx = 'd'+x let da ...

javascriptreactjs