发表新帖
发表新帖

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

后端 未结
关注
18 1719
南笙
南笙 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:36

    The best solution I have found, is to move the border to a wrapping element, like this:

    <div class='submit_button'><input type="submit" class="button"></div>

    With this CSS:

    .submit_button         { width: 150px; border: 1px solid #ccc; }
.submit_button .button { width: 150px; border: none; }

    The main problem with this solution is that the button now is a block-element, and needs to be fixed-width. We could use inline-block, except that Firefox2 does not support it.

    Any better solutions are welcome.

    0 讨论(0)
  • 灰色年华
    2020-11-28 23:38

    Well this works here:

    <html>
    <head>
        <style type="text/css">
            span.button {
                background: #eee;
                border: 1px solid #ccc;
            }

            span.button input {
                background:none;
                border:0;
                margin:0;
                padding:0;
            }   
        </style>
    </head>
    <body>
        <span class="button"><input type="button" name="..." value="Button"/></span>
    </body>
</html>
    0 讨论(0)
  • 感情败类
    2020-11-28 23:38

    if you dont want to add a wrapper to the input / button then try doing this. As this is invalid CSS then make sre its for IE only. Have the border as per for other browsers but use the filter:chroma for IE...

    <!--[if IE]>
<style type="text/css">
input {
filter:chroma(color=#000000);
border:none;
}
</style>
<![endif]-->

    worked for me.

    0 讨论(0)
  • 太阳男子
    2020-11-28 23:40

    I'm building on @nickmorss's example of using filters which didn't really work out for my situation... Using the glow filter instead worked out much better for me.

    <!--[if IE]>
<style type="text/css">
    input[type="submit"], input[type="button"], button
    {
        border: none !important;
        filter: progid:DXImageTransform.Microsoft.glow(color=#d0d0d0,strength=1);
        height: 24px; /* I had to adjust the height from the original value */
    }
</style>
<![endif]-->
    0 讨论(0)
  • 甜味超标
    2020-11-28 23:41

    I think filter:chroma(color=#000000); as metnioned a wile ago is the best as you can apply in certain class. Otherwise you will have to go and apply an extra tag on every button you have that is if you are using classes of course.

    .buttonStyle { filter:chroma(color=#000000); BACKGROUND-COLOR:#E5813C solid; BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; COLOR:#FF9900; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10px; FONT-WEIGHT: bold; TEXT-DECORATION: none; } That did it for me!

    0 讨论(0)
  • 北海茫月
    2020-11-28 23:41

    At least in IE7 you can style the border althogh you can't remove it (set it to none). So setting the color of the border to the same color that your background should do. 

    .submitbutton { 
background-color: #fff;
border: #fff dotted 1px; 
}

    if your background is white.

    0 讨论(0)
 看不清?
提交回复
热议问题