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

How to Suppress Border on Radio Button

2 Answers 315 Views
Button
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 10 Jan 2014, 02:42 PM
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 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 14 Jan 2014, 08:46 AM
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.
0
Bob
Top achievements
Rank 1
answered on 14 Jan 2014, 12:52 PM
That did the trick... works great!  Thanks for the help!
Tags
Button
Asked by
Bob
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Bob
Top achievements
Rank 1
Share this question
or