Button Style has thick border on page load when multiple buttons are on a page

this is my first question asked here a stack overflow.

I have a problem that has been bugging me for a bit now.

When I have a page loaded with multiple buttons on the page the first button in the HTML Markup seems to get this think border around the button.

I'm sorry if this has been asked before but I've read many forums that are related to this issue but so far have been unsuccessful with combating th开发者_运维技巧is issue with suggestions that address this issue. I am guessing it has something to do with the focus of the button on page load, for usability when pressing a keyboard button.

I was hoping that there is a way to style this button when is focus mode for IE 7 and above either through javascript or in this code behind. I am using VB.net but would greatly appreciate C# example's if the code behind is the way to go.

Any help would be greatly appreciated.

Thanks Jake

---

Try applying a CSS style for the button with the :focus pseudo class, which may allow to change the style of the button. Don't know if that's supported in all major browsers.

http://www.w3schools.com/CSS/pr_pseudo_focus.asp

---

You could try wrapping the button in a span, giving the span the border and removing it from the button?

Style:

<style type="text/css">
    .span-button INPUT { background-color: transparent; border-width: 0px; }
    .span-button { background: Silver; border: 1px solid red; }
</style>

Html:

<span class="span-button"><input type="button" value="wrapped button" /></span>

---

If you mean by thick border: the default highlighting performed by IE for the first submit button found on the form, then check this : Stopping IE from highlighting the first submit-button in a form

---

Use either of these CSS Styles

a:active, a:focus,input, input:active, input:focus{     outline: 0;     outline-style:none;     outline-width:0; }  
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner 
{     border: none; } 

OR

:focus {outline:none;} ::-moz-focus-inner {border:0;}

Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
      </customHeaders>
    </httpProtocol>

  </system.webServer>