JSFiddle - React, Tailwind, and code Playground

by gothic

HTML

<div class="report-file">
      <span>上传图片…</span><input tabindex="3" size="3" name="report" class="file-prew" type="file" onchange="document.getElementById('textName').value=this.value">
 </div>
 <input type="text" id="textName" style="height: 28px;border:1px solid #f1f1f1" />

CSS

.report-file {
            display: block;
            position: relative;
            width: 120px;
            height: 28px;
            overflow: hidden;
            border: 1px solid #428bca;
            background: none repeat scroll 0 0 #428bca;
            color: #fff;
            cursor: pointer;
            text-align: center;
            float: left;
            margin-right:5px;
        }
        .report-file span {
            cursor: pointer;
            display: block;
            line-height: 28px;
        }
        .file-prew {
            cursor: pointer;
            position: absolute;
            top: 0;
            left:0;
            width: 120px;
            height: 30px;
            font-size: 100px; 
            opacity: 0; 
            filter: alpha(opacity=0);
        }