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

Set CSS class for input tag

3 Answers 254 Views
Button
This is a migrated thread and some comments may be shown as answers.
Dawid Niedzwiedz
Top achievements
Rank 1
Dawid Niedzwiedz asked on 05 Oct 2011, 12:17 PM
Hi,

I use <telerik:RadButton CssClass="sth" runat="server" />.

Is it possible to set class for rendered <input> tag instead of <a>?
In my example class "sth" will be set for <a> tag.
<a class="sth" ...>
...
<input type="button" ...>
...
</a>

I wanted to modify <input> CSS class.

Regards,
Dawid Niedzwiedz

3 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 05 Oct 2011, 12:28 PM
Hi Dawid,

You could not apply CSS class to the inner input element. Instead that, use CSS cascade to apply some specific styles for the input element:

 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>
    <style type="text/css">
        .btnClass input
        {
            color: #f00; font-size: 14px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadButton ID="btn1" runat="server" CssClass="btnClass" Text="Button Class"></telerik:RadButton>
    </form>
</body>
</html>


All the best,
Bozhidar
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
0
Jayesh Goyani
Top achievements
Rank 2
answered on 05 Oct 2011, 12:30 PM
Hello,

please check with below code snippet.
<style type="text/css">
.RadButton  .rbDecorated
{
 background-color:#fff  !important;
height : 50px   !important;
// add your style here with !important.
}
</style>


Thanks,
Jayesh Goyani
0
Bozhidar
Telerik team
answered on 05 Oct 2011, 12:48 PM
Hello Jayesh,

The suggested CSS is not the right way to modify RadButton. Note that .rbDecoratd class is used to create standard button with rounded corners, which is achieved by using sprite images, and setting background-color will not take affect.

Also changing the height of the button will break the whole button layout. As I mentioned the default button is built with a sprite image which height is 22px, setting higher height will break it.

Alternatively, you could set height of 65 pixels which is also built with sprites: Bigger Icons and Buttons.

If you want to use Default style button with different than 22 or 65 pixels, you will need to create your custom sprite and to modify the CSS: RadButton Custom Height Tutorial.

Regards,
Bozhidar
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
Tags
Button
Asked by
Dawid Niedzwiedz
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Jayesh Goyani
Top achievements
Rank 2
Share this question
or