Set CSS class for input tag

4 posts, 0 answers
  1. Dawid Niedzwiedz
    Dawid Niedzwiedz avatar
    7 posts
    Member since:
    Jan 2010

    Posted 05 Oct 2011 Link to this post

    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
  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 05 Oct 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 05 Oct 2011 Link to this post

    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
  5. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 05 Oct 2011 Link to this post

    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
Back to Top