サンプル：何も指定なし

サンプル：CSSあり

ソース

なぜ、コレでいけるんだろう？

<style>
  .wrapIptFile {
    display: inline-block;
    position: relative;
    width: 72px;
    height: 72px;
    top: 0;
    left: 0;
  }
  .wrapIptFile em {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .wrapIptFile > div {
    display: table;
    width: 64px;
    height: 64px;
  }
  .wrapIptFile .btn {
    padding: 0;
    background-color: #1CA5C1;
    color: #fff;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    
    line-height: 1.2;
  }
  .wrapIptFile .btn:hover {
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
  }
</style>

<div class="wrapIptFile"><div>
  <label class="btn"><em><input type="file" name="upImg" accept="image/*" /></em>
    <span class="glyphicon glyphicon-picture" style="font-size:1.8rem"></span><br />
    <span style="font-size:0.8rem;">写真選択</span><br />
</label></div></div>

※「glyphicon glyphicon-picture」はbootstrapの絵文字アイコンのヤツ。