Style input type file? [duplicate]

2019-01-01 00:39发布

站内文章 / HTML/CSS
38 0 0

问题:

This question already has an answer here:

  • Styling an input type=“file” button 39 answers

Is it possible to style a input element of type file without worrying about browser compatibility? In my case I need to implement a background image and round border(1px), the button should also be customised if possible.

回答1:

Follow these steps then you can create custom styles for your file upload form:

1.) This is the simple HTML form(please read the HTML comments I have written here bellow)

    <form action=\"#type your action here\" method=\"POST\" enctype=\"multipart/form-data\">
    <div id=\"yourBtn\" style=\"height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;\" onclick=\"getFile()\">Click to upload!</div>
    <!-- this is your file input tag, so i hide it!-->
    <div style=\'height: 0px;width: 0px; overflow:hidden;\'><input id=\"upfile\" type=\"file\" value=\"upload\"/></div>
    <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
    <input type=\"submit\" value=\'submit\' >
    </form>

2.) Then use this simple script to pass the click event to file input tag.

    function getFile(){
        document.getElementById(\"upfile\").click();
    }

Now you can use any type of a styling without worrying how to change default styles. I know this very well, because I have been trying to change the default styles for month and a half. believe me it\'s very hard because different browsers have different upload input tag. So use this one to build your custom file upload forms.Here is the full AUTOMATED UPLOAD code.

<html>
<style>
#yourBtn{
   position: relative;
   top: 150px;
   font-family: calibri;
   width: 150px;
   padding: 10px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border: 1px dashed #BBB; 
   text-align: center;
   background-color: #DDD;
   cursor:pointer;
  }
</style>
<script type=\"text/javascript\">
 function getFile(){
   document.getElementById(\"upfile\").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split(\"\\\\\");
    document.getElementById(\"yourBtn\").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
  }
</script>
<body>
<center>
<form action=\"#type your action here\" method=\"POST\" enctype=\"multipart/form-data\" name=\"myForm\">
<div id=\"yourBtn\" onclick=\"getFile()\">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style=\'height: 0px; width: 0px;overflow:hidden;\'><input id=\"upfile\" type=\"file\" value=\"upload\" onchange=\"sub(this)\"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type=\"submit\" value=\'submit\' > -->
</form>
</center>
</body>
</html>


回答2:

Same solution via Jquery. Works if you have more than one file input in the page.

$j(\".filebutton\").click(function() {
    var input = $j(this).next().find(\'input\');
    input.click();
});

$j(\".fileinput\").change(function(){

    var file = $j(this).val();
    var fileName = file.split(\"\\\\\");
    var pai =$j(this).parent().parent().prev();
    pai.html(fileName[fileName.length-1]);
    event.preventDefault();
});


回答3:

After looking around on Google for a long time, trying out several solutions, both CSS, JavaScript and JQuery, i found that most of them were using an Image as the button. Some of them were hard to use, but i did manage to piece together something that ended out working out for me.

The important parts for me was:

  • The Browse button had to be a Button (not an image).
  • The button had to have a hover effect (to make it look nice).
  • The Width of both the Text and the button had to be easy to adjust.
  • The solution had to work in IE8, FF, Chrome and Safari.

This is the solution i came up with. And hope it can be of use to others as well.

Change the width of .file_input_textbox to change the width of the textbox.

Change the width of both .file_input_div, .file_input_button and .file_input_button_hover to change the width of the button. You might need to tweak a bit on the positions also. I never figured out why...

To test this solution, make a new html file and paste the content into it.

<html>
<head>

<style type=\"text/css\">

.file_input_textbox {height:25px;width:200px;float:left; }
.file_input_div     {position: relative;width:80px;height:26px;overflow: hidden; }
.file_input_button  {width: 80px;position:absolute;top:0px;
                     border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; }
.file_input_button_hover{width:80px;position:absolute;top:0px;
                     border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; }
.file_input_hidden  {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer;
                     opacity:0;filter:alpha(opacity=0);-ms-filter:\"alpha(opacity=0)\";-khtml-opacity:0;-moz-opacity:0; }
</style>
</head>
<body>
    <input type=\"text\" id=\"fileName\" class=\"file_input_textbox\" readonly=\"readonly\">
 <div class=\"file_input_div\">
  <input id=\"fileInputButton\" type=\"button\" value=\"Browse\" class=\"file_input_button\" />
  <input type=\"file\" class=\"file_input_hidden\" 
      onchange=\"javascript: document.getElementById(\'fileName\').value = this.value\" 
      onmouseover=\"document.getElementById(\'fileInputButton\').className=\'file_input_button_hover\';\"
      onmouseout=\"document.getElementById(\'fileInputButton\').className=\'file_input_button\';\" />
</div>
</body>
</html>


回答4:

Here\'s a simple css only solution, that creates a consistent target area, and lets you style your faux elements however you like.

The basic idea is this:

  1. Have two \"fake\" elements (a text input/link) as siblings to your real file input. Absolutely position them so they\'re exactly on top of your target area.
  2. Wrap your file input with a div. Set overflow to hidden (so the file input doesn\'t spill out), and make it exactly the size that you want your target area to be.
  3. Set opacity to 0 on the file input so it\'s hidden but still clickable. Give it a large font size so the you can click on all portions of the target area.

Here\'s the jsfiddle: http://jsfiddle.net/gwwar/nFLKU/

<form>
    <input id=\"faux\" type=\"text\" placeholder=\"Upload a file from your computer\" />
    <a href=\"#\" id=\"browse\">Browse </a>
    <div id=\"wrapper\">
        <input id=\"input\" size=\"100\" type=\"file\" />
    </div>
</form>


回答5:

Use the clip property along with opacity, z-index, absolute positioning, and some browser filters to place the file input over the desired button:

http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping



回答6:

use uniform js plugin to style input of any type, select, textarea.

The URL is http://uniformjs.com/



标签： html css file input cross-browser
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~