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

Error encountered while rendering HTML template with Django and AngularJS due to TemplateSyntaxError

Hello, I am new to Angular and Django. I have built a Django webpage and am attempting to display values from a basic AngularJS app and controller tutorial using my HTML template. However, I keep encountering an error in the index.html file when trying to ...

javascriptpythonhtmlangularjsdjango

The functionality of the Bootstrap dropdown list button is not functioning properly on mobile devices

Currently, I am in the process of developing a website and testing its mobile view on my iPhone. The website is still using bootstrap 3, but I have encountered some issues. When I tap on the navigation button on my iPhone, nothing happens - no dropdown lis ...

javascriptjqueryhtmlcsstwitter-bootstrap

Steps to selectively enable or disable checkboxes in a dynamic table depending on a dropdown selection

I'm currently facing an issue with a dynamically generated HTML table from a JSON file. Each row in the table consists of a dropdown list and a checkbox. I need the checkbox to be disabled when the default value is selected in the dropdown, and enable ...

javascriptjqueryhtmlcheckboxdrop-down-menu

Validation for prototype malfunctioning

I am currently using Prototype.js to implement form validation on my website. One of the fields requires an ajax request to a PHP file for validation purposes. The PHP file will return '1' if the value is valid and '0' if it is not. Des ...

javascriptformsvalidationprototypejs

Assigning arbitrary hidden form data from dropdown selection

Would like to assign Layers Value as one of the following: GFS Meteogram 3day std or WRF 20 Global Meteogram 3day Std depending on the option selected from the dropdown menu <div><select id="myselect" class="productViewerParameter" name=" ...

javascripthtml

AngularJS allows a function to return an array value, which can be displayed in separate blocks on

Building a program that involves working with an AngularJS array. I need to showcase the elements of the AngularJS array, returned by a function, in an organized manner. Each element should be displayed correspondingly - for example, 'first' cont ...

javascripthtmlcssangularjs

Is the input box failing to show up on your screen?

I recently tackled the task of creating a commenting feature for RSS articles Throughout my journey with PHP coding, I encountered an issue where the input box for comments was not displaying. https://i.stack.imgur.com/gJIlu.png Check out the snippet fr ...

phphtmldom

Create a layout consisting of two rows, each containing three blocks. Ensure that the layout is responsive by using only HTML and CSS, without relying

Hello there! I am looking to create a responsive layout without using bootstrap or any other framework..... I want to build it from scratch. https://i.stack.imgur.com/GAOkh.png I am aiming for responsive blocks that collapse into one column when the page ...

htmlcss

Align the parent div center and have both dynamic and fixed width child divs inside

In the main parent div, there is a combination of my logo and navigation bar. The logo has a fixed width while the dynamic-width navigation bar is positioned 100px to the right of the logo. However, the current layout places them on the left side of the s ...

htmlcssdynamicwidthcenter

Display MQTT information on a Django template

I've been utilizing paho-MQTT successfully to receive messages. However, I'm facing a challenge in displaying the received data in a template. Below is an excerpt of my code: import paho.mqtt.client as mqtt import json def on_connect(client, use ...

pythonhtmldjangomqttmessagebroker

When a height is specified in percentage, the Tbody element does not display correctly on the entire page

Hey there! Currently, I am working on a fixed header table. My goal is to create a table where the tbody section expands with the screen size and I would like to set the height in percentage (%) but unfortunately it doesn't seem to be functioning as e ...

htmlcsshtml-table

Modifying the page header content using JavaScript

There's this snippet of code that alters the image on another page: <div class="imgbx"> <button onclick="window.location.href='index.html?image=images/xr-black.jpg&tit=XR-black'" >Invisible ...

javascripthtml

I'm puzzled as to why my media query for `max-width: 470px` isn't functioning correctly

I'm struggling to get my code to work properly. I've tried adjusting some parts to be more specific and others more general, but it's not functioning as expected. Please review my code and any advice or assistance would be greatly appreciat ...

cssmedia-queries

What is the best way to adjust the font weight of a Bootstrap 4 modal header?

Is there a way to adjust the font weight in the header of a Bootstrap 4 modal? As an added challenge, I'm also interested in changing the font color to #7f7f7f... <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" r ...

cssbootstrap-4bootstrap-modal

Bypassing CORS/CORB restrictions in a React app without the need for a NodeJS/Express server

Encountering an issue while trying to launch an app on Heroku that fetches a response from Okta, as I am getting a CORB error The Cross-Origin Read Blocking (CORB) has blocked the cross-origin response from with MIME type application/json. Is there a wa ...

htmlreactjsherokucross-origin-read-blocking

The alignment of the Nivo Slider is off-center

Visit to see that the Nivo Slider is not properly centered on the background. I am unsure why this is happening. (Please disregard the 2nd and 3rd pictures as they are not the correct size, but focus on the 1st one). ...

jqueryhtmlcsspluginsnivo-slider

What is the best way to retrieve a selected value from one dropdown list and populate it into another dropdown

Can someone assist me with retrieving the selected answer from one drop-down list and populating it into another drop-down list? Below is my code for programming groups A and B: Example: If a user selects an option from group A and group B, I would li ...

javascriptphphtml

Iframes are not compatible with JQuery UI dialogs

After attempting to open a URL within an Iframe in a JQuery dialog box, I encountered the following issue: Here is the code snippet that I used: http://pastebin.com/Wqf0mGhZ I am looking for a solution to make sure that the dialog displays all of the con ...

javascriptjqueryhtmliframejquery-ui-dialog

Tips for utilizing ng class within a loop

Having some trouble with my template that loops through a JSON file using json server. The issue I'm facing is related to correctly applying ng class when clicking on icons. Currently, when I click on an icon, it adds a SCSS class but applies it to al ...

javascripthtmlcssangulartypescript

Guide on adjusting the darkness of a MaterialUI Avatar component image and adding text to it

I'm currently working with the Avatar component from Material UI along with Tailwind CSS. I found that by simply adding the image URL to the src, it displays the avatar successfully. <Avatar alt="Cindy Baker" src="https://mui.com/sta ...

javascriptcssreactjsmaterial-uitailwind-css