How to Suppress Border on Radio Button

3 posts, 0 answers
  1. Bob
    Bob avatar
    5 posts
    Member since:
    Jul 2011

    Posted 10 Jan 2014 Link to this post

    Greetings all,

    I am trying to supress/hide the border that appears around a radio button when it is selected.  I'm using the RADButton control with the button type set to ToggleButton and ToggleType set to Radio.  Please see attached example.  When an option is clicked, the box appears around the text, which I don't want displayed.  I've tried adding the CssClass tag to the RadButton control to override the border attributes, but this seems to have no effect.  The buttons are also set to use the Default skin.  I've also tried setting the "EnableEmbeddedBaseStyleSheet" and "EnableEmbeddedSkins" properties to False, but this does not work.

    Any thoughts or suggestions would be appreciated!

    Thank you.



  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 14 Jan 2014 Link to this post

    Hi,

    The outline on focus is an accessibility option for Chrome that could be easily removed with a simple CSS:

    <head runat="server">
        <title></title>
        <style type="text/css">
            .chromeFix:focus {
                outline: none;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadButton runat="server" ButtonType="ToggleButton" ToggleType="Radio" Text="State 1"
            CssClass="chromeFix">
        </telerik:RadButton>
        <telerik:RadButton runat="server" ButtonType="ToggleButton" ToggleType="Radio" Text="State 2">
        </telerik:RadButton>
        </form>
    </body>
    </html>

    Note that the the first button with the CSS fix does not apply any border when it is focused.

    Te fix could be applied globally if you don't like to target each button with a CssClass property:

    <head runat="server">
        <title></title>
        <style type="text/css">
            .RadButton:focus {
                outline: none;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadButton runat="server" ButtonType="ToggleButton" ToggleType="Radio" Text="State 1">
        </telerik:RadButton>
        <telerik:RadButton runat="server" ButtonType="ToggleButton" ToggleType="Radio" Text="State 2">
        </telerik:RadButton>
        </form>
    </body>
    </html>


    Regards,
    Bozhidar
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bob
    Bob avatar
    5 posts
    Member since:
    Jul 2011

    Posted 14 Jan 2014 Link to this post

    That did the trick... works great!  Thanks for the help!
Back to Top