Steps to modify the background color of Bootstrap custom-file-input classes

I am struggling with changing the background color of my input[type="file"]. Despite researching similar issues, none of the solutions I found helped resolve my problem. I am hopeful that someone here can provide some assistance.

Below is the snippet from my .cshtml file:

<div class="form-group">
      <label asp-for="Image" class="control-label"></label>
      <div class="custom-file">
           <input asp-for="Image" type="file" class="custom-file-input" multiple  name="img" >
           <label asp-for="Image" class="custom-file-label">Choose file</label>
           <span asp-validation-for="Image" class="text-danger"></span>
      </div>
</div>

And here is the relevant part of my site.css file:

.custom-file-input {
    background-color: #f1efdf;
    border-color: #c7c19f;
}

Answer №1

After some investigation, I realized that adjusting the style of my labels was the solution. I updated the label's style like this:

.custom-file-label {
    background-color: #f1efdf;
    border-color: #c7c19f;
}

I appreciate the helpful response. :)

Answer №2

Make sure to include your file: "site.css" after the bootsrap css as shown below

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbba1b9a1bf">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="site.css">

Alternatively, you can use the !important notation to override styles

.custom-file-input {
    background-color: #f1efdf!important;
    border-color: #c7c19f!important;
}

For more information, visit: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sticky position applied and overlapping with the following container

I'm struggling with the CSS property position: sticky. In my layout, I have three boxes stacked one after another. Each box is styled with the class container from Bootstrap. The middle box, labeled as box-2, needs to be fixed in its position. To ach ...

Aligning the content in the center of a div with inline display

Hi there, I have a quick question for the experts out there. I'm new to all of this so please bear with me :) I'm attempting to center an inline social sharing div on my website, but it's proving to be quite challenging. The div is nested w ...

html content area below the text

I'm currently working on developing a mobile webpage using jQuery Mobile. Encountering some peculiar behavior with text inside a div or table cell that has a background color. It seems to have some extra whitespace below the characters, making it app ...

Issue encountered while trying to interpret Bootstrap 4 within Netbeans 8.2

Currently, I am working on an HTML5/JS application using Node.js in Netbeans 8.2. As I develop the welcome page, I intend to incorporate Bootstrap 4. However, when I attempt to add bootstrap.min.css to my stylesheets folder, I encounter an error as shown i ...

Experiencing repeated triggering of ng-change on 'range' input in Chrome

When the range input is changed by sliding, the ng-change function continues to be triggered repeatedly until another element is clicked. This issue seems to occur only in the Chrome browser. You can view an example on this fiddle. Try sliding the element ...

styling a flex container with aligned text and buttons

I'm attempting to align text on the left and button controls on the right within a display: flex div. <CustomFieldContainer> <StyledWellContainer> <FieldDetails key={id}> <H4 bold>{label}</H4> <Styled ...

Challenges encountered when working with Bootstrap 4 Modals and Angular 8

I've encountered a problem with Bootstrap 4.3.1 Modals and Angular 8. Despite researching similar cases, none of the suggested solutions have worked for me. Here's what I've tried: I directly copied and pasted the code from Bootstrap' ...

Troubleshooting the issue of the background of element A not changing when hovering over element B, despite mouseleave not

Currently, I am attempting to modify the background of element A when mouseover event occurs on element B, and then revert it back to its original state upon mouseleave. It's worth noting that B is nested within A. Strangely, while the background colo ...

Utilizing Gulp variables to create dynamic destination file names?

As a newcomer to gulp, I am curious about the feasibility of achieving my desired outcome. Here is the structure of my projects: root | components | | | component_1 | | styles.scss | | actions.js | | template.html | | ... | componen ...

Dynamic elements fail to trigger JS function calls

I have a <div> that I dynamically populate with <input> and <a> elements using jQuery. It looks like this: The <div> gets filled when the addServicePanel() function is called: function addServicePanel() { var wrapper = $(".m ...

Table with checkboxes for row selection

Hey there, I've just set up a table with some values. My goal is to select all checkboxes with the first checkbox and uncheck them. print "Content-type: text/html; charset=iso-8859-1\n\n"; my $script = qq{ \$('#id').change(fu ...

Persistent Footer while scrolling on Internet Explorer

Trying to achieve a consistent look across Chrome, IE(11), and FF for my responsive website has been a challenge. The main issue I'm facing in IE is that when the site's content extends beyond the viewport, the scrollbar fails to reach the end d ...

An Internal Server Error (500) occurred while running an Ajax request

I have a JavaScript script that makes an AJAX call to a method in my DeviceUsage controller. There seems to be an issue as the breakpoint I placed at the start of the C# method is not getting hit. $(document).ready(function () { $('.z').on(& ...

The footer is not expanding to fill the entire width of the page

My footer is giving me trouble by not stretching to the full width on one specific page out of eight. This issue arose after I added an administration menu. Any assistance would be greatly appreciated. HTML: <div id="administraceMenu"> <ul clas ...

Fine-tuning the flexbox grid layout for various screen sizes, both big and small

Two different layouts were created. The first layout is designed for medium & large screens, while the second one is tailored for devices with a maximum width of 736px. Check out the vanilla implementation using flexbox (without mobile adaptation) Here ...

Unable to scroll through embed code on iOS responsive devices

-webkit-overflow-scrolling: touch; overflow-y: scroll; I have attempted using this code but unfortunately it is still not functioning as expected. The issue seems to only occur on iOS responsive devices, as it works fine on other devices including MAC. ...

Minimize the width to display a scrollbar

Check out this page: where you'll find the same code snippet displayed twice - once through GitHub Gist embedding and the second using Jekyll's internal syntax highlighter Rouge. I'm currently working on styling the second code snippet to m ...

Exploring the depths of Cordova's capabilities: implementing a striking 3D front-to-back screen flip effect

Recently, I came across an interesting app that had a unique feature. By clicking on a button, the entire screen would flip from front to back with a 3D effect on iPhone. It was quite impressive to see in action. The developer mentioned that he achieved t ...

issue occurring when customizing bootstrap in django

For the past couple of hours, I've been grappling with a puzzling issue while attempting to override Bootstrap in Django. Initially, without any custom CSS files, the outcome looked like this: https://i.sstatic.net/GLndf.png Subsequently, I crafted ...

Are user message templates available for use with Twitter Bootstrap?

I am interested in implementing Twitter Bootstrap into my website design. While it looks amazing, I now need to incorporate user messages (similar to those found on forums or Twitter). These messages should include short text, submission time, user image, ...