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

后端 未结 18 1747
南笙
南笙 2020-11-28 22:57

I am implementing a design that uses custom styled submit-buttons. They are quite simply light grey buttons with a slightly darker outer border:

input.button         


        
相关标签:
18条回答
  • 2020-11-28 23:18

    With the sliding doors technique, use two spans inside of the button. And eliminate any formatting on the button in your IE override.

    <button><span class="open">Search<span class="close"></span></span></button>
    
    0 讨论(0)
  • 2020-11-28 23:22

    This is going to work:

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

    This works even with button tag, and eventually you can safely use the background-image css property.

    0 讨论(0)
  • 2020-11-28 23:23

    I had this problem and solved it with a div around the button, displayed it as a block, and positioned it manually. the margins for buttons in IE and FF was just too unpredictable and there was no way for them both to be happy. My submit button had to be perfectly lined up against the input, so it just wouldnt work without positioning the items as blocks.

    0 讨论(0)
  • 2020-11-28 23:25

    I know I'm almost 2 years late to the game, but I found another solution (at least for IE7).

    If you add another input type="submit" to your form before any other submit button in the form the problem will go away. Now you just need to hide this new, black-border-absorbing-button.

    This works for me (overflow needs to be "auto"):

    <input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />
    

    Note: I am using an HTML5 doctype (<!doctype html>).

    0 讨论(0)
  • 2020-11-28 23:28

    I've found an answer that works for me on another forum. It removes the unwanted black border in ie6 and ie7. It's probable that some/many of you have not positioned your input="submit" in form tags. Don't overlook this. It worked for me after trying everything else.

    If you are using a submit button, make sure it is within a form and not just a fieldset:

    <form><fieldset><input type="submit"></fieldset></form>
    
    0 讨论(0)
  • 2020-11-28 23:28

    A hackish solution might be to use markup like this:

    <button><span>Go</span></button>
    

    and apply your border styles to the span element.

    0 讨论(0)
提交回复
热议问题