交换按钮和输入类型中的文本=＆＃34;文件＆＃34;

Question

我想在输入type="file"中交换文字和按钮。是否可以仅使用html和css执行此任务，或者仅适用于js解决方案？

Answer 1

关键字是 ::-webkit-file-upload-button 和 ::file-selector-button。解决方案将取决于浏览器版本。

另见 -webkit-file-upload-button css implementation for firefox 要么 https://css-tricks.com/snippets/css/force-file-upload-input-button-to-right-side-in-webkit/

Answer 2

如果要在单击按钮时交换按钮的文本，则必须调用JS方法，没有什么花哨但只是从输入字段中检索文本，因为用户输入的文本可以动态更改。

<强> HTML

<input type="button" class="swapBtn" id="swapBtn" onclick="swapText()" value="button text">
<input type="text" id="inputTxt" class="inputTxt">

<强> JS

function swapText()
{
    var textStr = document.getElementById("inputTxt").value;
    var btnEl = document.getElementById("swapBtn");
    btnEl.innerHTML = textStr;
}

Answer 3

输入可以隐藏和嵌入在标签和按钮之间。然后 Javascript 继承了该功能：

<label for="upload-file" style="width:130px; display: inline-block; border: 1px solid #ccc">Choose file</label>
<input id="upload-file" type="file" style="display:none" onchange="this.previousElementSibling.textContent = this.previousElementSibling.title = this.files[0].name"> 
<button onclick="this.previousElementSibling.click()">Browse...</button>

http://jsfiddle.net/nxmwhsap/