Html 设置输入类型的样式="；文件"；按钮_Html_Css_File Io

Html 设置输入类型的样式="；文件"；按钮

html css file-io

Html 设置输入类型的样式="；文件"；按钮,html,css,file-io,Html,Css,File Io,如何设置输入按钮的样式？我能想到的唯一方法是在呈现按钮后使用javascript查找按钮并为其指定样式你也可以看看设计文件输入的样式是出了名的困难，因为大多数浏览器不会改变CSS或javascript的外观即使输入的大小也不会响应以下情况： <input type="file" style="width:200px"> 相反，您需要使用“大小”属性： <input type="file" size="60" /> 对于任何比这更复杂的样式（例如，更改浏览按

如何设置输入按钮的样式？

我能想到的唯一方法是在呈现按钮后使用javascript查找按钮并为其指定样式

你也可以看看

设计文件输入的样式是出了名的困难，因为大多数浏览器不会改变CSS或javascript的外观

即使输入的大小也不会响应以下情况：

<input type="file" style="width:200px">

相反，您需要使用“大小”属性：

<input type="file" size="60" />

对于任何比这更复杂的样式（例如，更改浏览按钮的外观），您将需要了解将样式化按钮和输入框覆盖在本机文件输入之上的巧妙方法。rm at已经提到的文章是我看过的最好的一篇

更新

虽然很难直接为

标记设置样式，但在

标记的帮助下，这很容易实现。请参阅@JoshCrozier下面的答案：

使用css隐藏它，并使用带有$（选择器）的自定义按钮。单击（）可激活浏览按钮。然后设置一个间隔来检查文件输入类型的值。间隔可以为用户显示值，以便用户可以看到上传的内容。提交表单时间隔将清除[编辑]抱歉，我一直很忙，我想更新此帖子，下面是一个示例

$（窗口）。加载（函数（）{
var intervalFunc=函数（）{
$（'#文件名'）.html（$（'#文件类型'）.val（））；
};
$（'#browse click'）。在（'click'，函数（）{//use.live（），用于较旧版本的jQuery
$（“#文件类型”）。单击（）；
setInterval（intervalFunc，1）；
返回false；
});
});

这对于jquery来说很简单。给出了一个代码示例，其中包含了对的建议进行的轻微修改

基本html：

准备好后，请确保在输入上设置样式：

opacity:0

无法设置显示：无，因为它需要可单击。但是如果你愿意，你可以把它放在“新建”按钮下，或者用z-index把它塞进其他东西下面

设置一些jquery，以便在单击图像时单击实际输入

$（“#图像_图标”）。单击（函数（）{
$（“#真实文件_输入”）。单击（）；
});

现在你的按钮开始工作了。更改时只需剪切并粘贴值

$（'input[type=file]'）。绑定（'change'，function（）{
var str=“”；
str=$（this.val（）；
$（“#文件名”）.text（str）；
}).change（）；

塔达！您可能需要将val（）解析为更有意义的内容，但您应该已经准备好了。

遵循以下步骤，然后您可以为文件上载表单创建自定义样式：

这是一个简单的HTML表单（请阅读我在下面写的HTML注释）


点击上传！

然后使用这个简单的脚本将单击事件传递到文件输入标记

函数getFile（）{ document.getElementById（“upfile”）。单击（）； } 现在，您可以使用任何类型的样式，而无需担心如何更改默认样式

我很清楚这一点，因为我已经尝试更改默认样式一个半月了。相信我，这很难，因为不同的浏览器有不同的上传输入标签。因此，使用这个来构建您的自定义文件上载表单。这是完整的自动上传代码

函数getFile（）{ document.getElementById（“upfile”）。单击（）； } 职能小组（obj）{ var file=obj.value； var fileName=file.split（“\\”）； document.getElementById（“yourBtn”）.innerHTML=fileName[fileName.length-1]； document.myForm.submit（）； event.preventDefault（）； }

#你的btn{
位置：相对位置；
顶部：150px；
字体系列：calibri；
宽度：150px；
填充：10px；
-webkit边界半径：5px；
-moz边界半径：5px；
边框：1px虚线#BBB；
文本对齐：居中；
背景色：#DDD；
光标：指针；
}


单击以上载文件

$（'.new_Btn'）。单击（函数（）{
$（'#html_btn'）。单击（）；
});
.new\u Btn{
//你的css属性
}
#html_btn{
显示：无；
}

选择图片



您可以将输入type=“file”包装在输入标签内。根据需要设置标签样式，并使用display:none隐藏输入
 创建
时，所有渲染引擎都会自动生成一个按钮。从历史上看，这个按钮是完全不可设计的。然而，Trident和WebKit通过伪元素添加了挂钩
Trident
从IE10开始，可以使用：-ms browse
伪元素设置文件输入按钮的样式。基本上，应用于常规按钮的任何CSS规则都可以应用于伪元素。例如：

：：-ms浏览{
背景：黑色；
颜色：红色；
填充：1em；
}


我通常会使用简单的javascript来定制文件输入标签。一个隐藏的输入字段，点击按钮，javascript调用隐藏字段，这个简单的解决方案不需要任何css或jquery
<button id="file" onclick="$('#file').click()">Upload File</button>

上传文件
我发现了一种非常简单的方法，可以将“文件”按钮切换为图片。
您只需给图片贴上标签并将其放在“文件”按钮的顶部
<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>



单击标记的图像时，选择文件按钮。此操作不需要JavaScript！以下是一个跨浏览器解决方案：
<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

-它在Chrome/FF/IE中工作-（IE10/9/8/7）
最好的方法是将带有for
属性的自定义标签元素附加到隐藏的文件输入元素。（标签的for属性必须与文件el匹配
<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

input[type="file"] {
    display: none;
}

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }

input {
  height: 0px;
  outline: none;
}

input[type="file"]:before {
  content: "Browse";
  background: #fff;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #e0e0e0;
  top: -1px;
  line-height: 35px;
  color: #b6b6b6;
  padding-left: 5px;
  display: block;
}

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

<input type="file" id="upload" style="visibility:hidden;">

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>

// div styled as my load file button
<div id="simClick">Load from backup</div>

<input type="file" id="readFile" />

// Click function for input
$("#readFile").click(function() {
    readFile();
});

// Simulate click on the input when clicking div
$("#simClick").click(function() {
    $("#readFile").trigger("click");
});

//i am using semantic ui

<button class="ui circular icon button purple send-button" id="send-btn">
      <i class="paper plane icon"></i>
    </button>
  <input type="file" id="file" class="input-file" />

var attachButton=document.querySelector('.attach-button');
    attachButton.addEventListener('click', e=>{
        $('#file').trigger("click")
    })

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});

<style>
/* Note: This CSS will style all instances of 
   <input type=file /> controls in your website. */
input[type="file"],
input[type="file"]:visited,
input[type="file"]:hover,
input[type="file"]:focus,
input[type="file"]:active {
    margin:0;
    padding: 0em 0em;
    padding: 0rem 0rem;
    overflow: hidden; /* long file names overflow so just hide the end */
    background: #ffffff;
    border-radius: .2em;
    border-radius: .2rem;
    outline: none;
    border: 2px solid #bbb;
    cursor: pointer;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
}

input[type="file"]:hover {
    background: #f9f9ff; /* I am using a light blue to indicate an interaction */
    border: 2px solid #999;
}

input[type="file"]:visited,
input[type="file"]:focus,
input[type="file"]:active {
    background: #fff; /* Default back to white when focused. */
    border: 2px solid #999;
}

/* Note: Firefox flags the file name box as a *readonly* input. So that attribute selector was added below. Note: These selectors blow up in IE so have to be separated from the same styles above. */
input[type="file"]:disabled,
input[type="file"]:read-only {
    margin: 0;
    padding: 0em 0em;
    padding: 0rem 0rem;
    overflow: hidden; /* long file names overflow so just hide the end */
    background: #ffffff;
    border-radius: .2em;
    border-radius: .2rem;
    outline: none;
    border: 2px solid #bbb;
    cursor: pointer;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
}

input[type="file"]:disabled:hover,
input[type="file"]:read-only:hover {
    background: #f9f9ff; /* I am using a light blue to indicate an interaction */
    border: 2px solid #999;
}

input[type="file"]:disabled:visited,
input[type="file"]:disabled:focus,
input[type="file"]:disabled:active,
input[type="file"]:read-only:visited,
input[type="file"]:read-only:focus,
input[type="file"]:read-only:active {
    background: #fff; /* Default back to white when focused. */
    border: 2px solid #999;
}

/* IE UPLOAD BUTTON STYLE: This attempts to alter the file upload button style in IE.  Keep in mind IE gives you limited design control but at least you can customize its upload button.*/
::-ms-browse { /* IE */
    display: inline-block;
    margin: 0;
    padding: .2em .5em;
    padding: .2rem .5rem;
    text-align: center;
    outline: none;
    border: none;
    background: #fff;
    white-space: nowrap;
    cursor: pointer;
}
/* FIREFOX UPLOAD BUTTON STYLE */
::file-selector-button {/* firefox */
    display: inline-block;
    margin: 0rem 1rem 0rem 0rem;
    padding: .18em .5em;
    padding: .18rem .5rem;
    -webkit-appearance: button;
    text-align: center;
    border-radius: .1rem 0rem 0rem .1rem;
    outline: none;
    border: none;
    border-right: 2px solid #bbb;
    background: #eee;
    white-space: nowrap;
    cursor: pointer;
}
/* CHROME AND EDGE UPLOAD BUTTON STYLE */
::-webkit-file-upload-button { /* chrome and edge */
    display: inline-block;
    margin: 0rem 1rem 0rem 0rem;
    padding: .19em .5em;
    padding: .19rem .5rem;
    -webkit-appearance: button;
    text-align: center;
    border-radius: .1rem 0rem 0rem .1rem;
    outline: none;
    border: none;
    border-right: 2px solid #bbb;
    background: #eee;
    white-space: nowrap;
    cursor: pointer;
}
</style>