Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadButton Focus Rectangle on Image Button IE9

2 Answers 76 Views
Button
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 23 Oct 2012, 02:01 PM
Chrome-Image-Button-Pressed.png
IE9-Image-Button-Pressed.png
PasswordClick.png
PasswordDisabled.png
PasswordHover.png
PasswordUp.png
Hi

While trying to use a RadButton as an Image Button I have come across this issue under IE9 (and probably all versions of IE) where when the button is pressed a focus rectangle is shown around it.  Please see attached : IE9 Image Button Pressed.png

I have tested under Chrome and this does not happen.  Please see attached : Chrome Image Button Pressed.png

Is there a way to remove the focus rectangle when using IE?

I am using Visual Studio 2010, .Net framework 4 and Telerik Q3 2012 controls.

Basic HTML to test this is:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Telerik_RadButton._Default" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <div>
            <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton" Width="77px" Height="22px">
                <Image ImageUrl="~/i/PasswordUp.png" HoveredImageUrl="~/i/PasswordHover.png"
                  PressedImageUrl="~/i/PasswordClick.png" DisabledImageUrl="~/i/PasswordDisabled.png"
                  EnableImageButton="true" />
            </telerik:RadButton>
        </div>
    </form>
</body>
</html>

I've attached the png files that are used above.

Thanks

Dale

2 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 26 Oct 2012, 01:50 PM
Hello Dale,

Adding the following code in the head tag of your page should remove the outline around the RadButton:
<style type="text/css">
    .RadButton
    {
        outline: none;
    }
</style>

Feel free to contact us again if you run into more difficulties.

Regards,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Steve
Top achievements
Rank 1
answered on 26 Oct 2012, 03:39 PM
Hi Slav

Thanks for that, worked a charm.

Cheers
Dale
Tags
Button
Asked by
Steve
Top achievements
Rank 1
Answers by
Slav
Telerik team
Steve
Top achievements
Rank 1
Share this question
or