Changing radUpload browse button style

Thread is closed for posting
7 posts, 1 answers
  1. Ali
    Ali avatar
    15 posts
    Member since:
    Jul 2012

    Posted 29 Jul 2012 Link to this post

    I'm using VS2010, C# to develop my ASP.NET web app. I want to use a radControl Upload component, (http://www.telerik.com/products/aspnet-ajax/upload.aspx), I want to change browse button style, I've tested several methods, I've explored your samples and forums but I've found nothing helpful! I'm searching for an easy way to style my browse button, I want to change its background image and size, also how can I change filename textbox beside browse button?
    thanks
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Jul 2012 Link to this post

    Hi Ali,

    Try the following CSS to style Browse Button.

    CSS:
    <style type="text/css">
     div.RadUpload .ruBrowse
       {
         background-image: url('../Images/Hydrangeas.jpg') !important;
         height: 24px !important;
         width: 150px !important;
       }
    </style>

    About your second scenario by default filename textbox is beside the browse button. Please elaborate your scenario a bit more.

    Hope this helps.

    Regards,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ali
    Ali avatar
    15 posts
    Member since:
    Jul 2012

    Posted 30 Jul 2012 Link to this post

    Thanks

    I'm going to change this textbox style, is it possible? for instance I want to change its border or its size, how can I do it?
  5. Ali
    Ali avatar
    15 posts
    Member since:
    Jul 2012

    Posted 30 Jul 2012 Link to this post

    It worked great but how can I change its hover style? :hover doesn't work

    thanks
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Jul 2012 Link to this post

    Hi Ali,

    Try overriding the default CSS as follows.

    CSS:
    <style type="text/css">
     div.RadUpload .ruBrowse, div.RadUpload .ruBrowse .ruButtonHover//To change its hover style of Browse Button
      {
        background-image: url('../Images/Image.jpg') !important;
        background-position: 0 -23px !important;
        height: 24px !important;
        width: 150px !important;
      }
     div.RadUpload .ruFakeInput//For styling RadUpload input textbox.
      {
        border: 1px solid red !important;
        width: 20px !important;
      }
    </style>

    Try setting InputSize property of RadUpload to an integer value to increase the width of all file input elements.

    ASPX:
    <telerik:RadUpload ID="RadUpload1" runat="server" InputSize="25">
    </telerik:RadUpload>

    Hope this helps.

    Regards,
    Princy.
  7. Ali
    Ali avatar
    15 posts
    Member since:
    Jul 2012

    Posted 01 Aug 2012 Link to this post

    thanks Princy, but it didn't work:
    div.RadUpload .ruBrowse, div.RadUpload .ruBrowse .ruButtonHover

    it just changed style of normal state (and not the hover)

    also div.RadUpload .ruFakeInput worked, but right border of my textbox is missing, how can I solve it? what does InputSize  do?
  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 03 Aug 2012 Link to this post

    Hello Ali,

    Please take a look at the following help articles where it is explained in details how you can alter the look of the RadAsyncUpload control:
    http://www.telerik.com/help/aspnet-ajax/asyncupload-increase-button-width.html

    I also tested the code below and it works as expected form my side (see the attached image):
    div.RadUpload .ruFakeInput {
      border:1px solid;
      border-color: red !important;
         }

    Regards,
    Kate
    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
UI for ASP.NET Ajax is Ready for VS 2017