RadButton Focus Rectangle on Image Button IE9

3 posts, 0 answers
  1. Dale
    Dale avatar
    11 posts
    Member since:
    Aug 2012

    Posted 23 Oct 2012 Link to this post

    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. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 26 Oct 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dale
    Dale avatar
    11 posts
    Member since:
    Aug 2012

    Posted 26 Oct 2012 Link to this post

    Hi Slav

    Thanks for that, worked a charm.

    Cheers
    Dale
Back to Top