The button style has a tight border for page loading when several buttons are on the page

Question

This is my first question asked here overflow stack.

I have a problem that is already eavesdropping on me a bit.

When I have a page with several buttons per page, the first button in the HTML markup seems to make this frame think around the button.

I apologize if this was asked earlier, but I read many forums related to this problem, but so far I have not been able to deal with this problem with suggestions that relate to this problem. I suppose this has something to do with the focus of the button when loading the page, for ease of use when pressing the keyboard button.

I was hoping there was a way to style this button when the focus mode for IE 7 and above is either through javascript or in this code behind. I use VB.net, but really appreciate the C # example, if the code behind is the way to go.

Any help would be greatly appreciated.

Thanks jake

Answer 1

Try applying a CSS style to a button with a pseudo-course: focus pseudo, which may allow you to change the style of the button. I don’t know if this is supported in all major browsers.

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

Answer 2

Could you try to wrap the button in the gap by indicating the border of 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>

Answer 3

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

Answer 4

Use any 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 part of the CSS style is complete, you may also need to install an IE emulator. Update the web.config file for web applications and include the key under it.

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

  </system.webServer>