カスタムフィールドテンプレートのファイルアップロードボタンをCSSで装飾する

（１）カスタムフィールドテンプレートの設定

テンプレートコンテンツ：を以下のように設定します。

[sample_img]
label = サンプル画像
type = file
before = <div class=fileuploadbtn>画像を選択
after = </div>

テンプレートインストラクション:を以下のように設定します。

<script type="text/javascript">
jQuery(document).ready(function(){
   jQuery('.fileuploadbtn').after('<span class="this"></span>');
  jQuery('input[type=file]').on("change", function() {
    var file = this.files[0];
    jQuery('span.this').html(file.name);
  });
});
</script>

（２）CSSの設定

.dl_file .fileuploadbtn {
  background: #666;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  line-height: 23px;
  margin-left: 0;
  overflow: hidden;
  padding: 10px;
  position: relative;
  text-align: center;
  width: 180px;
}
.dl_file .fileuploadbtn:hover {
  background: #999;
}
.dl_file .fileuploadbtn input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.dl_file .this {
  display: block;
}

参考：input[type=file]をCSSで加工する