Problem with the `file` input not working properly

Currently, I am working on creating a form with two input fields - one for text and the other for file upload. However, the issue I am facing is that the Browse button for the file input is being displayed inside the input box. My goal is to have the button outside of the input box. I have attached a screenshot for reference. Any assistance in resolving this matter would be greatly appreciated.

Below is the snippet of the code:

<form class="form-inline fonts-calibri" action="" enctype = "multipart/form-data">
      <div class="form-group">
        <label for="oid">Purchase Order No. </label>
        <input type="text" class="form-control" id="oid" placeholder="Enter PO number" name="oid">
      </div>
      <div class="form-group pull-right" style="margin-right : 15%;">
        <label for="file">Upload PO </label>
        <input type = "file" class="form-control" id="file" name = "file" size = "50"/>
        <span><button type="submit" class="btn btn-default" id="upload-button"><span class="fa fa-upload"></span></button></span>
     </div>             
</form>
htmlformstwitter-bootstrapcssfile-upload

Answer №1

To eliminate the box generated by the form-control class, use the code snippet below:

<input type = "file" id="file" name = "file" size = "50"/>

If you wish to add additional styling, feel free to include other classes as needed.

Update: If you still require the form-control class, you can assign additional classes to it like so:

class="form-control test"

Then, to remove the box effects of form-control, apply the following CSS:

.form-control.test {
    border: none !important;
    outline: none !important;
}

Answer №2

To get rid of the unwanted box, it is necessary to eliminate the .form-control class from the <input type="file" />.

Take a look at the code snippet provided below!

.form-group.pull-right input {float: left;}
span {float: left;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="form-inline fonts-calibri" action="" enctype = "multipart/form-data">
      <div class="form-group">
        <label for="oid">Purchase Order No. </label>
        <input type="text" class="form-control" id="oid" placeholder="Enter PO number" name="oid">
      </div>
      <div class="form-group pull-right" style="margin-right : 15%;">
        <label for="file">Upload PO </label><div class="clearfix"></div>
        <input type = "file" id="file" name = "file" size = "50"/>
        <span><button type="submit" class="btn btn-default" id="upload-button"><span class="fa fa-upload"></span></button></span>
     </div>             
</form>

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

Choose an option with JavaScript once the request is successful

Choose the day, month, and year using JSON data success: function(jsondata){ var data=JSON.parse(jsondata); var list_html="<div id='editrelation'><label id='dateLabel' style='display:none&apo ...

javascripthtmlselectedindexselectedindexchanged

Heroku: Showcasing a unique page during the application's startup process

Would it be feasible to showcase a static HTML page while the dyno is starting up, just like how a custom page can be shown during errors or maintenance mode? The size of my app's slug is quite significant, leading to a startup time of almost 50 seco ...

htmlcssherokudyno

The compatibility issues with the textarea and text-indent: placeholder feature on EDGE are causing functionality problems

I'm facing a peculiar problem with placeholders when using the Edge browser. In my current project, I need to implement a textarea with a specific text-indent property. However, on Edge, the placeholder text appears displaced more than expected. To h ...

htmlcssmicrosoft-edge

Angular JS causing text alignment issues in table cells when viewed on mobile devices

I have created a web application that requires both desktop and mobile views, utilizing Angular JS. Everything is functioning as expected except for the text alignment within tables. I attempted using <td align="left">, but it did not produce any cha ...

javascripthtmlcssangularjs

Evolutionary JavaScript Adaptations

I am currently working on an HTML project that involves the use of JavaScript with JQuery. In my project, I will be including a map showcasing different images such as 'Abstract', 'Animals', 'Beach' and more. var images = { & ...

javascripthtmldynamicupload

What is the method for adjusting the font size of the label in an Angular mat-checkbox element?

I've been trying to adjust the font size of a mat-checkbox's label, but no matter what I do, the component's default styles keep overriding my changes: Using !important Trying ::ng-deep Applying a global style in styles.scss <mat-checkb ...

cssangularangular-materialangular-forms

How can I use jQuery to activate and deactivate a class in HTML?

My jQuery function for handling tabs is as follows: jQuery(document).ready(function($) { tab = $('.tabs h3 a'); tab.on('click', function(event) { event.preventDefault(); tab.removeClass('active'); ...

jqueryhtml

Exploring the ins and outs of HTML event handlers with JavaScript

When using events in your HTML and including a small amount of JavaScript, what is this called? Is it referred to as a "JavaScript attribute function," simply a "JavaScript attribute," or something else entirely? For example: <button onClick="locat ...

javascripthtmldom-events

The left side of my image doesn't quite reach the edges of the screen as desired

Even after setting the padding and margin in the parent container to 0, the image is still not filling to the edges. Here is the image. This snippet of code shows my JavaScript file: import styles from './css/Home.module.css'; export default fun ...

htmlcssreactjs

Is a CSS-only autoexpanding label possible within a list?

I am interested in having all the labels automatically expand to the size of the widest one. Below is the HTML structure: <div class="body"> <ul class="list"> <li> <span> <label>condition</label> ...

htmlcss

How to insert space after every item generated by ng-repeat in AngularJS

I'm looking to evenly distribute elements based on this inquiry How to distribute li elements equally? I am utilizing angular with jade: ul li(ng-repeat="item in items") {{item.name}} However, ng-repeat does not create newlines after each element ...

javascripthtmlangularjs

Internet Explorer experiences performance issues when a table containing over 500 rows is being utilized

Can anyone offer advice on speeding up the display of large tables with 500+ rows in Internet Explorer? Here is my current approach: The MySQL query result includes 500+ rows, which I then loop through using a while loop to display: echo "<tr class=& ...

phpjqueryhtmlcssinternet-explorer

Using JavaScript to dynamically load Cascading Style Sheets based on the current

I am trying to dynamically load different CSS files based on the current date (season). I attempted to tweak an image script that I found on Stack Overflow, but it didn't yield the desired result. Could someone please guide me on where I might be ma ...

javascriptcssdate

Adjusting the size of HighCharts HighMaps with a custom function

Simple query here (I believe) I have a DIV with the class "container" acting as my Map. The Highcharts plugin I'm using is responsive, but it only resizes when the window does. I'm looking to manually trigger a resize without adjusting my windo ...

javascriptjqueryhtmlcsshighcharts

Having trouble with generating HTML templates with inline CSS in Flask

How can I randomly select a background picture (out of 4) for my homepage on a personal website using Flask? Despite my attempts to create an HTML template with inline CSS, the selected image does not display as expected. I've already tried using url ...

pythonhtmlcssflaskjinja2

What functions do the accelerometer, gyroscope, and picture-in-picture serve in the HTML code for embedding a YouTube video?

After successfully uploading a video on Youtube, you will be provided with the following HTML code for embedding: <iframe width="560" height="315" src="https://www.youtube.com/embed/UF8uR6Z6KLc" frameborder="0" allow="accelerometer; autoplay; encrypt ...

htmlyoutube

The HTML checkbox is initialized as checked when the page loads

Is there a way to set the checkbox as unchecked in HTML? I have tried multiple ways, but it always loads as checked <input id="chkBox" checked type="checkbox" /> <input id="chkBox" checked=false type="checkbox" /> <input id="chkBox" checked ...

htmlcheckbox

Creating and formatting HTML pages

Trying to expand my knowledge of HTML, I decided to experiment with some basic code. I selected what seemed like a straightforward layout from a website, saved the source onto my desktop, and made some slight modifications. When I opened the HTML file in a ...

htmlbrowser

What are the guidelines for incorporating tag names in CSS selectors?

I created a button that when clicked, displays a table containing actors. I have named them as follows: <button class="actors">Show actors</button> <table class="actors">...</div> Next, I want to style and access them in my CSS (a ...

htmlcsscss-selectors

What is the best way to include a line break in a text sourced from a React state?

Here is a functional React code snippet: const about={ text1: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere, qui?', text2: 'eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?&apos ...

htmlreactjs