Implementing a file input with btn-outline styling using Bootstrap

In my bootstrap form, I have an input file that I want to style like a btn-outline-info. Here is the code snippet:

 <div class="btn btn-outline-info btn-lg">
     <input id="signedAgreementFile" type="file" class="form-control-file">
  </div>

As a result, I have a "Choose a file" button with the text "no file choice" next to it in blue within a blue box:

https://i.sstatic.net/od2pK.png

When hovering over it, the button turns blue and the text becomes white: https://i.sstatic.net/goOAP.png

However, when I upload a file, the name of the file replaces "no file choice" but remains white:

https://i.sstatic.net/wtu3k.png

https://i.sstatic.net/H3Qjq.png

I am unsure why this happens or how to correct it as I do not have direct access to this text in the HTML.

htmlcssinputbootstrap-4

Answer №1

To prevent the background color from changing on hover, simply apply the text-info class to your input element and add the following additional CSS:

.btn:hover {
  background-color: transparent !important;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


 <div class="btn btn-outline-info btn-lg">
     <input id="signedAgreementFile" type="file" class="form-control-file text-info">
  </div>

Answer №2

Give this a shot?

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="btn btn-outline-info btn-lg">
  <input id="signedAgreementFile" type="file" class="form-control-file" onchange="this.style.color='#17a2be'">
</div>

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

Why are my AngularJs elements not appearing in the print dialog window?

Whenever I try to open the print Dialogue on a specific page, all I'm seeing is a blank screen. The majority of the content on this page consists of AngularJS elements. To trigger the print dialogue, I use the following code: <a href=""onclick="wi ...

javascripthtmlcssangularjsprinting

The issue of overflowing content and scrolling causing sections of the webpage to be hidden

I've been diving into HTML, CSS, and jQuery to enhance my personal website. However, I've encountered an issue when trying to implement larger menus - they don't display properly when scrolling, and I can't seem to pinpoint the reason. ...

csshtml

Enhancing an image with a hover-activated overlay

I'm trying to enhance the setup of my page with three images in columns by adding an extra overlay on top of the main image but beneath the hover effects. However, I seem to be encountering some difficulties while working on it. Take a look at my cod ...

htmlcssoverlay

Using Javascript to dynamically change the data type to align with a specific keyword

I need to create an input box for a promo code that triggers the appearance of additional radio input options when a specific promo code is entered. For example, if the user enters "springchicken" in the input box, I want a set of radio inputs to show up ...

javascriptjqueryhtmlformsinput

Utilizing Google+ Snippet and Open Graph Protocol for Enhanced Visibility

I am currently facing an issue with my dynamically built web page where the links shared on Google+ are not showing snippets properly. I have followed the example snippet for article rendering and documentation provided here: https://developers.google.com ...

javascripthtmlajaxgoogle-plusfacebook-opengraph

The concept of an HTML pop-up message that hovers above the content

While working on my HTML form, I encountered an issue regarding the display of a warning message notifying users about the caps lock being on. Currently, the warning is shown correctly in a div located to the right of the text box. However, this div's ...

javascripthtmlcss

Sending data from a PHP URL to JavaScript and then to another PHP file

After referencing the code from , I am modifying it to send the recorded audio file to a server by including a sessionId in the URL. The PHP page for this purpose is located at . My PHP versions are PHP 5.4 and PHP 5.5.22. For passing variables and data be ...

javascriptphphtmlpostxmlhttprequest

Retrieve every HTML element that is currently visible on the screen as a result

I have a dynamic HTML table that updates frequently, with the potential for over 1000 rows. Instead of replacing the entire table each time it updates, I am exploring options to only update the visible rows. My initial approach involved iterating through ...

javascripthtmldom

Is there a way to avoid creating extra <td>s by placing form end tags inside a table?

I am currently working with Rails version 2.3.5. One thing that I have never attempted is putting two forms inside a single table or inserting a form end tag within a table. I searched Google for information on this but couldn't find much, so I thoug ...

htmlruby-on-rails

Using a pseudo-element after to center CSS content

Although there are numerous posts discussing this topic, my situation is unique. In my case, I have a collection of colors represented by circles. When I click on a circle, I add content in the form of a check mark by including a class selector with an af ...

htmlcssangularjs

How do I ensure the CSS triangles maintain their correct boundaries when hovered over with the cursor?

Can the issue of incorrect triangle activation be fixed when hovering on http://jsfiddle.net/2AXhR/? Sometimes the wrong triangle is triggered due to the triangles' bounding areas being rectangles, causing overlap and z-index conflicts. <style ...

javascripthtmlcsscss-shapes

Is there a way to automatically import HTML content from a website?

Is there a way for my program to automatically retrieve HTML content from a website and integrate it into Eclipse or Visual Studio? I want this process to occur every five minutes. Additionally, is it possible for my program to simulate button clicks or ...

javajavascriptc#htmlvisual-studio-2010

Troubleshooting CSS appendChild not functioning as anticipated

I'm attempting to manually input CSS for font-face in a new window with the following code: const css = '@font-face {font-family:Roboto; src:url("assets/fonts/Roboto-Black.ttf");}'; const head = this.externalWindow.document.getElementsByTag ...

javascripthtmlcss

I'm curious as to why my table header changes color when there is no CSS and I haven't styled the table in my HTML

Hey there, I need some help with my page setup: https://i.sstatic.net/EUsUC.png The section labeled "Detailansicht Telefonnummer" has a mysterious blue background that's not coming from the empty CSS file or Angular component. Any insights on where ...

htmlcssangularhtml-table

Customizing Material UI InputProps with HTML attributes: A step-by-step guide

When using react-number-format with Material UI Textfield, I'm attempting to set a maximum value of 100 for my field. Numbers above 100 should not be allowed. How can this be achieved using the HTML attribute: min? import InputAdornment from "@ma ...

htmlreactjsmaterial-uireact-number-format

Trouble with centering navigation bar using HTML margin:auto

Below is the code snippet I'm currently working on: .nav-item { display: inline; color: white; padding: 30px 10px; font-style: bold; font-family: sans-serif; font-size: 20px; width: 1000px; margin: 0 auto; } .nav-container { back ...

htmlcssmarginnav

Tips for preventing countdown from resetting when you refresh the page

I'm currently using a countdown feature on my Shopify website that is functioning well, except for one issue - whenever the page is refreshed, the countdown resets itself. Can anyone provide guidance on how to solve this problem? Thank you in advance! ...

javascriptjqueryhtmlcssshopify

Having trouble getting Bootstrap 4 to work with Angular CLI?

I have integrated Bootstrap 4 using Node into an Angular 2 project by following the instructions provided in this guide: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap Despite meticulously adhering to the guidelines, I encountered ...

node.jsangularbootstrap-4

Obtain the contenteditable span's value

I'm facing an issue with a content editable span - I want to extract its value when the post button is clicked, but it's not working as expected. Please note that I am unable to convert the span to a textbox or div, I specifically need the value ...

javascriptjqueryhtmlcontenteditable

The collapsing z-index menu in Bootstrap 4 is experiencing CSS issues and is not functioning correctly

I have a bootstrap 4 menu with a slide effect that is functioning correctly, but there seems to be an issue with the z-index value I have set for it. Specifically, there is some content within a parallax jumbotron that is overlapping the menu links. I need ...

htmlcsstwitter-bootstrap