Adjusting border width in Firefox with HTML buttons

Here is the HTML button I am working with:

<input ID = "btnModel" value="Submit">

This is how it appears in Firefox:

However, when I assign a border-width to it:

input#btnModel{
    border-width:2px;
}

it changes to this:

1- It does not revert back to its original form regardless of the border-width values.

2- In Chrome, the same issue arises when the border values are above 3px or below 1px. The button returns to normal when the border-width is set back to 2px.

3- I have compared all the properties before and after making this modification, and they appear to be consistent.

Any insights on what could be causing this behavior?

Answer №1

I have made some changes to the code, please check it out here.

HTML:

<input  ID = "btnModel" value="Submit">

CSS:

input#btnModel{
border:4px solid #000;
background-color:#c00;
color:#fff;
text-align:center;
-webkit-box-shadow:inset 0px 0px 14px -3px #f2fadc;
border-radius:6px;
}
input#btnModel:hover{
border-width:6px;
}

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

Styling a submission button with HTML and CSS

I've tried following a few solutions on Stack Overflow, but I just can't seem to get this simple line of code to work. <a class="lp-element lp-pom-button" id="lp-pom-button-25"><span class="label" style="margin-top: -10px;">Get Notif ...

The utilization of Display Flex resulting in the enlargement of the containing div

I am currently learning CSS and trying out some new things. I am looking to create a page with two side-by-side divs: one for the sidebar and the other for the main content. My goal is to have the sidebar take up 400px of width and allow the content part t ...

What is the best way to combine two rows in a data table?

As I progress with my endeavor to construct a user-friendly transition matrix in R, following up on the previous post regarding adding a vertical line to the first column header in a data table, I am faced with a new challenge. Upon executing the provided ...

Troubleshooting issue: Bootstrap not loading with custom CSS on Flask platform

Recently, I started learning Flask and created a basic web application. Utilizing Bootstrap 5 for my project, I encountered an issue where my custom CSS fails to work when the Bootstrap stylesheet is loaded (removing it resolves the problem). My folder st ...

Stacking parent elements above children in CSS styling

I am encountering an issue with the following DIV structure: <div id="parent"> <div id="child"></div> <div id="child2"></div> </div> My goal is to have a partially opaque background for the parent DIV and fully visible ...

Learn how to use AJAX to automatically retrieve the contents of a file

I'm currently exploring AJAX to retrieve the contents of a file upon clicking a button, as I am fairly new to AJAX. Below is the HTML code snippet: <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { ...

Fiddle demonstrates HTML functionality, while local testing is unsuccessful

Currently, I am in the process of creating an image slider and attempting to run it on my personal computer. However, upon doing so, I have encountered a problem where the page is not rendering correctly. Additionally, I receive an ActiveX warning message ...

Is there a translation issue affecting Chrome version 44?

Recently, Chrome 44 (44.0.2403.89 m) was released and I've encountered some issues with the translate3d feature (on both Mac and Windows versions). This problem is impacting plugins such as fullPage.js and consequently affecting numerous pages at th ...

Updating the default color of selected text within a webpage's content

Is there a way to modify the default blue color that appears when content is selected on a webpage? I am wondering how to change this selection color to a custom color of choice. ...

row-1 css classes on the top in a project built with Blazor

I'm currently working on customizing the standard layout provided in Blazor projects like WASM or server, but I'm a bit perplexed by the top-row px-4 css classes. Within the HTML code that appears to define the top row/header section is this sni ...

Unable to modify the main button color using LESS in the ant.design framework

I am experiencing an issue with using ant design to style a primary button. I have tried to change the background color using LESS, specifically by setting @btn-primary-bg: #1B2F55, but for some reason, it does not work. I know I could easily change the ba ...

Position the div beneath another div using the display:grid property

I can't seem to figure out how to position a div below another div using display:grid. The div is appearing on top instead of below. The "app-bm-payment-card-item" is actually a custom Angular component. Here's the HTML file: //div wrapper < ...

Easy jQuery image that smoothly fades in and out

Can anyone recommend a script that allows for creating a slideshow where images fade in and out, rather than sliding left and right? I have a list of images below that I would like to use for the slideshow. <ul class="slideshow"> <li><im ...

HTML scroll bar functioning intermittently

Here is my code snippet. table#projectTable > tbody , table#productTable > tbody{ height: 300px; overflow: auto; } The scrollbar is functional when clicking the top part, but not the bottom. It's quite odd. Upon usin ...

Leveraging HTML within jQuery UI autocomplete

In the past, I was able to include HTML in the JSON array I used for autocomplete with jQuery UI before version 1.8.4. For example: $row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>'; ...

Steps to obtain an Element binding from a Svelte component

Is it possible to retrieve the bounding client rect of an anchor element? I typically mark this using the syntax bind:this={someVariable}. However, when I add this code to a Svelte component, I receive a different object that Svelte uses to represent a c ...

I am trying to use ajax to upload a photo in ASP.NET MVC, but when the file reaches the controller, it is showing

I am trying to upload a profile photo using Ajax in ASP.NET MVC, but I am encountering an issue where the upload parameter is coming as null to the action method. Here are the HTML codes for the file upload section: <div class="preview"> <di ...

Modify the class of the dropdown and heading 2 elements if they meet specific conditions using Animate.css

Is it possible to add a class using jQuery when two specific conditions are met? 1) If the dropdown selection is either "acting" or "backstage" 2) If the membership status is set to "Non-member" If both of these requirements are fulfilled, I would like ...

Design an HTML watermark input that remains visible as the user starts typing

I'm currently in the process of developing an application that enables businesses to access their account through theirname.mydomain.com. I am working on creating a signup form for this purpose. Today, I stumbled upon squarespace and noticed they hav ...

Is it possible to modify the size of a bullet image in Javascript?

Can an image bullet style loaded via a URL be resized using JavaScript code like this: var listItem = document.createElement('li'); listItem.style.listStyleImage = "url(some url)"; listItem.style.listStylePosition = "inside"; I aim to increase ...