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.
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
0
Hi,
The outline on focus is an accessibility option for Chrome that could be easily removed with a simple CSS:
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:
Regards,
Bozhidar
Telerik
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:
<html xmlns="http://www.w3.org/1999/xhtml"><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
Rank 1
answered on 14 Jan 2014, 12:52 PM
That did the trick... works great! Thanks for the help!