What code and language make the input tag do what it does?

The input is not part of a specific programming language, it is part of something we call interface ( link ), each browser has its own rendering engine that will implement this interface each one done in its own programming language, most of the engines are written in c ++ , but there are engines that are written in < a questions / tagged / c "class=" post-tag "title=" show questions tagged 'c' "> c or java .

List of most popular engines

• Chrome and Opera use the Blink engine (Webkit fork)
• Safari uses Webkit engine
• InternetExplorer uses the Trident (discontinued in favor of EdgeHTML and MS Edge)
• Microsoft Edge uses the EdgeHTML engine.
• Firefox uses the Gecko engine.

When you put such an element inside the html:

<input type="file">

The browser will initially read as text, but then it will render the whole document and begin to generate what we call "widgets" (the generated widgets based on the operating system or not), this can occur as far as the page is loading or only when it finishes loading (will depend on the type of buffer).

There's no way you can manipulate, the HTML and XML structure is rendered by the browser and not by an external script, the engines are already compiled, the only way to actually change would be to create your own engine, or grab an existing one and modify (just like google did with Webkit)

However with CSS and HTML you can simulate a custom input like this:

var fakeInput   = document.querySelector(".file-customizado");
var realInput   = document.querySelector(".file-customizado input[type=file]");
var selectLabel = document.querySelector(".file-customizado .label");
var pathFile    = document.querySelector(".file-customizado .path");

//Remove o path do arquivo, assim é exibido apenas o nome do arquivo
function basename(path) {
   path = String(path);
   var d = path.split(/\|\//);
   return d[d.length - 1];
}

//O input customizado dispara o evento no input real
fakeInput.onclick = function() {
     realInput.click();
};

//O input detecta a troca de arquivo para mostrar que o input não esta vazio no label
realInput.onchange = function() {
    if (realInput.value) {
       selectLabel.className = "label hide";
       pathFile.innerHTML = basename(realInput.value);
       pathFile.className = "path";
    } else {
       pathFile.className = "path hide";
       selectLabel.className = "label";
    }
};

.file-customizado {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    width: 200px;
    background-color: #f00;
    color: #fff;
    display: inline-block;
    cursor: pointer;
}
.file-customizado input[type=file] {
    position: absolute;
    visibility: hidden;
    top: -9990px;
    left: -9999px;
}
.file-customizado .label, .file-customizado .path {
    display: block;
    padding: 10px 0;
    text-align: center;
}
.file-customizado .hide {
    display: none !important;
}

<div class="file-customizado">
    <input type="file" name="campo">
    <span class="label">Selecionar...</span>
    <span class="path hide"></span>
</div>

The input element is the HTML markup language, and is part of a template for a data set, the form, associated with a URI method and action. HTML elements

The function for accessing the files in the operating system occurs briefly as follows:

When the user clicks the button for the "input file" element, the browser makes a request to the server (in this case the operating system itself), and establishes a connection to the server via network socket .

Each platform has a Web library with an internal script (or interface) example .Net Framework in order to make the connection possible, where the nickname handshake-handshake .

In this way a call is made on the Operating System (server side) that opens your own dialog box (in Windows OpenFileDialog ) containing a list of files for selection.

After selecting the file, the transfer is performed through the protocol appropriate, HTTP or other depending on the file type.

Some meta data (not all) of the selected file (s) are available for manipulation in the browser.

The HTMLInputElement interface provides special properties and methods (in addition to the normal HTMLElement interface it also has at its inheritance) to manipulate the layout and presentation of the input elements.

The message "No file selected" is part of the browser's internal code and I do not know a way to change it without javascript.