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

Question

Hello, 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 this 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

Answer 1

Hey,

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

Answer 2

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>

Answer 3

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