I have a file input button design (it is the second button that says UPLOAD) how would I accomplish this design in HTML using CSS and or Javascript???
2
- I have reworded the questiongustavoanalytics– gustavoanalytics2014-05-20 18:54:59 +00:00Commented May 20, 2014 at 18:54
- You should offer what you have triedZach Saucier– Zach Saucier2014-05-21 17:16:28 +00:00Commented May 21, 2014 at 17:16
Add a comment |
1 Answer
ok try this out:
html:
<p class="form"> <input type="text" id="path" /> <label class="uploadFile">upload<span><input type="file" id="myfile" name="myfile" /></span> </label> </p> css:
.form input[type="file"]{ z-index: 999; line-height: 0; font-size: 50px; position: absolute; opacity: 0; filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)"; cursor: pointer; _cursor: hand; margin: 0; padding:0; left:0; } .uploadFile{ position:relative; overflow:hidden; cursor:pointer; text-align:center; background-color:#fff; display:block; width:197px; height:31px; font-size:18px; line-height:30px; float:left; color:#000; border:solid 1px #000; } input[type="text"]{ border: none; position: absolute; top: 50px; width: 200px; } js:
$('#myfile').change(function(){ $('#path').val($(this).val()); }); $(function(){ if($("#path").val() == ""){ $("#path").val("No file choosen"); } }); 