1. Home
  2. Forum
  3. ASP.NET MVC
  4. Unable to change 'Browse' button style in ASP.NET MVC Upload Box Control

Unable to change 'Browse' button style in ASP.NET MVC Upload Box Control

Hello, I am currently using the Uploadbox and it is working correctly to upload files. I wanted to change the background color of the Button using CSS and am having trouble.


Here is my code:

  @Html.EJ().Uploadbox("File").CssClass("custom").SaveUrl(@Url.Action("SaveDefault", new { id = Model.ID})).RemoveUrl(@Url.Action("RemoveDefault")).MultipleFilesSelection(true).AutoUpload(true).ClientSideEvents(e => e.Complete("oncomplete")).ClientSideEvents(e => e.Error("error")).FileSize(25000000)

   <style class="cssStyles">
        .custom.e-select
        {
            background-color: #ffff05;
            font-weight: bold;
            font-family: sans-serif;
        }
    </style>

As you can see I add the css class and link it to the element. The background color fails to change even though I have it set to #FFF05 (Yellow).

Thank you for any help.

8 Replies
KV Karthikeyan Viswanathan Syncfusion Team September 26, 2018 07:24 AM UTC

Hi Eli, 

Thanks for contacting Syncfusion support. 

Yes, you can customize the button color by using the below mentioned code. 

Please refer the below code example: 
<code> 
 
<style class="cssStyles"> 
    .custom.e-uploadbox.e-widget .e-selectpart.e-select { 
        background-color: #ffff05; 
        font-weight: bold; 
        font-family: sans-serif; 
    } 
</style> 
</code> 


Regards, 
Karthikeyan V. 


EH Eli Hellmer September 26, 2018 02:32 PM UTC

Thank you for your help, this solution worked!

EH Eli Hellmer September 26, 2018 02:37 PM UTC

One more question, this code does not seem to change the text color to white. Not sure why. It stays black even with the CSS. Also, how can I change the "hover" color of the button? I need it to to turn white when the user hovers their mouse over the button.

KV Karthikeyan Viswanathan Syncfusion Team September 27, 2018 09:16 AM UTC

Hi Eli, 

Yes, you can change the hover font color by using the below code example. 

Please refer the below code example: 

<code> 

<style class="cssStyles"> 
    .custom.e-uploadbox.e-widget .e-selectpart.e-select { 
        background-color: #ffff05; 
        font-weight: bold; 
        font-family: sans-serif; 
    } 
        .custom.e-uploadbox.e-widget .e-selectpart.e-select:hover .e-inputbtn { 
            color: white; 
        } 
</style> 
</code> 


Regards, 
Karthikeyan V. 


EH Eli Hellmer September 27, 2018 01:58 PM UTC

Thank you. The last problem I am having is when I attempt to change the regular button text color. It stays black when it should be white. Here is my code:

 .custom.e-uploadbox.e-widget .e-selectpart.e-select
 {
            color: white;
            background-color: #337ab7;
  }

The background color changes to blue, but the actual text color is still black. What can I do to change the text color to white?

EH Eli Hellmer September 27, 2018 02:00 PM UTC

Nevermind, I fixed this issue. Thank you for all your help.

EH Eli Hellmer September 27, 2018 02:56 PM UTC

The documentation for the ASP.NET MVC UploadBox styling did not have any of these tips. It would help to have this information in the documentation. It simply states that to edit the CSS of the button you use:

.custom.e-select{
          //code goes here
}

When that is not the case, it is much more complicated.

KV Karthikeyan Viswanathan Syncfusion Team September 28, 2018 04:31 AM UTC

Hi Eli, 

Thanks for the update. 

We glad to hear that your issue has been resolved. And also sure, we will update the details in our UG Documentation. 

Regards, 
Karthikeyan V. 


Loader.
Up arrow icon