This is a migrated thread and some comments may be shown as answers.

RadButton Focus Rectangle on Image Button IE9

2 Answers 118 Views

Button

This is a migrated thread and some comments may be shown as answers.

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

RadButton Focus Rectangle on Image Button IE9

2 Answers, 1 is accepted