工作需要筆記

way3

<div class="col-3 frmCaption">Attachments:</div>
<div class="col-9">
    <label class="customUpload btnUpload btnM"> <span>Upload files</span>

        <input type="file" class="upload" />
    </label>
</div>

.btnDefault, .btnUpload {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    color: #333333;
    cursor: pointer;
    font-weight: 400;
    display: inline-block;
    padding: 6px 12px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}
.btnDefault:focus, .btnDefault:hover, .btnUpload:focus, .btnUpload:hover {
    background-color: #E6E6E6;
}
.btnM {
    border-radius: 4px;
    font-size: 14px;
    padding: 6px 12px;
}
.customUpload {
    overflow: hidden;
    position: relative;
    display: block;
}
.customUpload input.upload {
    cursor: pointer;
    margin: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
}

way2

http://stackoverflow.com/questions/21842274/cross-browser-custom-styling-for-file-upload-button

label.myLabel input[type="file"] {
    position: fixed;
    top: -1000px;
}

/***** Example custom styling *****/
.myLabel {
    border: 2px solid #AAA;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 2px;
    background: #DDD;
    display: inline-block;
}
.myLabel:hover {
    background: #CCC;
}
.myLabel:active {
    background: #CCF;
}
.myLabel :invalid + span {
    color: #A44;
}
.myLabel :valid + span {
    color: #4A4;
}

<label class="myLabel">
    <input type="file" required/>
    <span>My Label</span>
</label>

HTML

<div id="upload-file-container">
   <input type="file" name="photo" />
</div>

CSS

#upload-file-container {
   background: url(images/custom-file-input.png) no-repeat;
}

#upload-file-container input {
   filter: alpha(opacity=0);
   opacity: 0;
}

http://stackoverflow.com/questions/5813344/how-to-customize-input-type-file