How Can I customize browse button like this? [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This is an image of a browse button for uploading file. I want to craete a browse button like in this image. How can I do that?

Answer 1

Here's how you do it! Steps:
We use <input type=file> for uploading files. But we don't actually display it.
We use our own customized button and redirect all clicks to our <input type=file>.
Every time our <input type=file> changes its value, we display it in our span.
We style our file browser form to anything we like.
The following were made similar to the image, as close as possible.
.browse-field {
position: relative;
display: inline-block;
font-family: Arial, sans-serif;
font-size: 15px;
color: #999;
border-radius: 5px;
border: 1px solid #CACACA;
background-image: linear-gradient(rgba(0,0,0,0.15), transparent 13%);
}
.browse-field>input[type=file] { display: none; }
.browse-field .file {
display: inline-block;
margin: 0 0 0 0.8em;
min-width: 25ch; /* Modify as needed! */
}
.browse-field .btn {
margin: 6px 9px;
padding: 5px 14px;
outline: none;
border: none;
border-radius: 4px;
background: #CACACA;
color: #FFF;
font: inherit;
}
/* Modify the following styles as desired */
.browse-field .btn:hover { background: #DADADA; }
.browse-field .btn:active { background: #CACACA; }
.browse-field .btn:focus { box-shadow: 0 0 0 2px rgba(0,0,0,0.1); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$(".browse-field>input[type=file]").each(function(){
var inpfile = $(this);
inpfile.change(function(){
inpfile.siblings(".file").text(this.value)
})
inpfile.siblings(".btn").click(function(){
inpfile.click();
})
})
})
</script>
<div class=browse-field>
<input type=file>
<span class=file>No file selected.</span>
<button class=btn>Browse</button>
</div>

Answer 2

Check out this website: http://css3buttongenerator.com
It will help you creating a Button like in your link.

Answer 3

I think do you need this. Chick it out on : click
<div>
<form>
<input type="text" name=""/>
<input type="submit" value="Submit" class="button"/>
</form>
</div>
Css
form input {
border:0px;
margin:0px;
padding:0px;
}
form .button{
padding:5px;
border-radius:3px;
}
div {
border:1px solid #B2B2B2;
border-radius:3px;
width:33%;
height:auto;
padding:5px;
}