Unexpected black border outline appears around submit button in Internet Explorer

I've encountered an issue with IE 7-10 displaying a black border on a submit button. Oddly, the border disappears when I click inside the fieldset, but then reappears when I click send or cancel. Has anyone else experienced this problem with Internet Explorer? I have attached a screenshot for reference. Thank you!

Here is the CSS code snippet:

.submit
        {

        margin:-50px 0 0 -148px;
        background-color:#eee;
        height:40px;
        width:120px;
        padding:0;
        border:1px solid #666;
        color:#42A0FF;

        }

.cancel
        {

        margin: -51px 0 0 -20px;
        background-color:#eee;
        height:40px;
        width:120px;
        padding:0;
        border:1px solid #666;
        color:#42A0FF;

        }

fieldset
        {

        background:#f2f2e6;
        border-color:#cccccc #cccccc #cccccc #cccccc;
        margin:10px 0 46px -150px;
        width:404px;
        display:block;
        text-height:10px;
        padding-bottom:15px;
        }
cssinternet-explorer

Answer №1

Have you tried resetting the primary input field?

 input {border:0; margin:0;padding:0;}

To ensure consistency, add a span with the desired border style:

.input-shell {border: #ccc 1px solid}


<span class="input-shell"><input button /></span>
....

Check out this JSFIDDLE link for reference:

http://jsfiddle.net/Riskbreaker/tqnhg/1/

You can also refer to this Stack Overflow thread discussing similar issues:

Any way to remove IEs black border around submit button in active forms?

For additional customization, try this CSS code snippet:

  input[type=submit],
    input[type=reset],
    input[type=button]
    {
        filter:chroma(color=#000000);
        color:#cccccc;
    }

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

Create a captivating dropdown hover menu with animated CSS

My latest project involves creating a sleek CSS dropdown button/menu that I am now attempting to add animation to. Initially, the menu transitioned from display: none to display:block on hover, but I encountered issues animating it. So, I decided to switc ...

htmlcssanimationcss-animations

What is the best way to implement a focusout or blur event for an entire section in your project?

We have recently added a new feature where, upon clicking on a button, a section appears with input fields and a search button. However, we are facing an issue - when using the tab key to navigate within the section, each element triggers a separate blur e ...

javascripthtmlcssangular

How can I make a sticky element appear behind a different element?

https://jsfiddle.net/30suam6z/1/ .first { height: 100vh; background-color: red; position: relative; z-index: 2; /* Increase z-index to ensure it covers .test */ } .second { height: 100vh; background-color: yellow; position: relative; z- ...

csssticky

Uniform line spacing

Is it possible to ensure consistent line-height between all lines by specifying it as 0.99em for both P tags and UL tags? Along with that, is it possible to maintain a space of 0.99em between P tags and UL tags, as well as between P tags themselves? To se ...

htmlcss

Utilizing aria-expanded="true" for modifying a CSS attribute: A simple guide

I am looking to utilize aria-expanded="true" in order to modify a css property such as an active class : <li class="active"> <a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true"> <span class="networ ...

javascriptjqueryhtmlcss

Troubleshooting: When Angular Fade In Out Animation Won't Work

Looking to create a simple animation with the angular animation package The goal is to smoothly transition from opacity 0 to opacity 1 for a fade effect. I've had success with other properties like height and display, but struggling with opacity. H ...

htmlcssangularanimationangular-animations

What's causing the excessive amount of white space in my image?

Whenever I include a picture of myself on the page, it creates excessive white space at the bottom. I'm not sure why this happens, but removing the image eliminates the white space. I've attempted adjusting the margins and padding, as well as se ...

htmlcss

Animate the text before it fades away

Could someone help me figure out how to make my text animations work correctly? I want to show and hide specific text with animation when buttons are pressed, but I'm having trouble implementing the hiding animation. Any guidance would be appreciated. ...

javascripthtmlcss

The properties of JavaFX in the CSS file are not recognized by Eclipse, showing an error message as "unknown property"

After installing Eclipse and downloading the OpenJFX SDK, I encountered an issue where Eclipse marked all -fx- properties in the .css file as warnings with the message "unknown property". Surprisingly, my JavaFX projects still compiled and ran smoothly, ...

javacsseclipsejavafxefxclipse

In PHP/HTML, input submit does not work with CSS styling

I am struggling with styling the input submit button in my form. I want the button to appear as text with a change in background and font color on hover. Any solutions? input[type="submit"] { font-family: made, mirage; text-decoration: none; backg ...

htmlcss

Unable to vertically align radio buttons

Using Bootstrap 4, I want to create a list of three radio buttons. Here is the HTML structure I have tried: <div class="mt-3 text-center"> <div class="custom-control custom-radio"> <input type="radio" id=& ...

htmlcssbootstrap-4

Is there a way to identify the font being utilized on a website if it is not explicitly stated in the HTML code?

Is there a way for me to identify the font used in the text "MAPLE SYRUP" on this website? I checked the page source, but I didn't see any specific fonts listed. The font used is quite attractive and I would like to use it myself. I suspect it's ...

htmlcssfonts

Resizable vector graphics with consistent border dimensions

I need a solution that maintains a constant line width while still making the SVG responsive. Here is the desired outcome: https://codepen.io/dudleystorey/pen/wMLBLK The example linked above achieves this using CSS, but I am looking to achieve the same r ...

htmlcsssvgresponsive

The intricacy of the jQuery each function and its interaction with $(this

EXPLANATION: I am working with two elements, each containing a set of options. The first element has options with db-ids as values, acting as parent categories. The second element is filled with options where the parent db-ids are their values and their o ...

javascriptjqueryhtmlcss

Avoid displaying the div style when printing by utilizing CSS and JavaScript

How can I use Javascript and CSS to print content in a div? My main div has an id of 'preview' and the content is fetched from a database using PHP and MySQL. However, when I try to print the page, the style of the 'preview' div does no ...

javascriptphpcss

What is the best way to customize a hyperlink to match the current webpage design?

I have created a navigation bar at the top of my website screen. I want to implement a feature where the word corresponding to the current page is highlighted. For example, if I am on the "Contact" page, the word "Contact" should be highlighted, and so o ...

htmlcss

Background with borders full of parallax effects scrolling in sync

I'm completely new to the world of HTML and CSS, and I was hoping for some guidance. I've been trying to wrap my head around a tutorial on creating parallax scrolling websites, which you can find here: However, I noticed that the tutorial includ ...

javascriptjqueryhtmlcss

Can a Unicode character be overwritten using a specific method?

Is there a way to display a number on top of the unicode character '♤' without using images? I have over 200 ♤ symbols each with a unique number, and using images would take up too much space. The characters will need to be different sizes, a ...

javascripthtmlcss

What is the best way to line up three divs as circular shapes in a single row?

Struggling with alignment while trying to create a block legend, seeking advice for correction: .footertext { display: flex; /* setting up flex container */ flex-direction: row; /* default value; can be omitted */ flex- ...

htmlcssflexbox

Tips for Hosting Multiple Websites with Unique Domain Names on One Web Hosting Account

I am currently seeking recommendations for mechanisms that would work well in my specific situation. After trying out the iframe solution, I realized it was not suitable due to responsiveness issues on the website. I then looked into using a responsive i ...

javascripthtmlcssiframeresponsive-design