How Can I customize browse button like 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?

It is unclear what you ask. If that image is actually a screenshot of some page, then why don't you simply examine the code? Since in that case you have the html and css, what are you missing? _Look at it!_ — arkascha, Jul 25 '15 at 06:51
No, it is not a scrrenshot of any web page. I found it from a psd file. But I cant do that. — Web Code, Jul 25 '15 at 06:57
@arkascha: A .PSD file is a layered image file used in Adobe PhotoShop. It is a Photoshop Document file. — Samir Selia, Jul 25 '15 at 07:03
Ah, a photoshop formatted file. Why don't you say so right away? ;-) Then indeed you have a problem. Since that is a proprietary format you cannot really look into it. Even if you could it would be illegal to do so. So you have to guess. I suggest you start with the hint given below: one of the online "button wizards" that help you style a button. But I still don't see what the question is. It is a button. You can style buttons. _Do it._ — arkascha, Jul 25 '15 at 07:03
If however you refer to the browser builtin button for a file select input element, then things are different. You cannot directly style that, since it is builtin. You have to replace it with a javascript based solution which mimics its behavor. _Then_ you can style it. There are libraries for that if you don't want to implement that yourself. But in the end it boils down to this: you finally have a "normal" html button which you can style however you like. — arkascha, Jul 25 '15 at 07:10

Jason Sparc · Answer 1 · 2015-07-25T12:37:46.470

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>

score 0 · Answer 2 · answered Jul 25 '15 at 06:54

0

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

answered Jul 25 '15 at 06:54

frank schmidt

121
3
15

Thanks for ur answer. But it is not the same as I want. Pls see the image I gave. – Web Code Jul 25 '15 at 07:09
you can create exactly your button. it is a generator. – frank schmidt Jul 26 '15 at 11:12

score 0 · Answer 3 · answered Jul 25 '15 at 07:37

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;
    }

How Can I customize browse button like this?

3 Answers3