云平台建设学习2

更改input file

<form role="form">
  <div class="form-group">
    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <div class="form-group">
    <label for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

上边是最开始的从本地上传文件的样式，若想改变这个样式需要重新写一个.css文件再引入。

uploadfile.css
.upfile{
    padding:4px 15px;
    height:32px;
    line-height:20px;
    position:relative;
    border:1px solid #5b5f62;
    color:black;
    text-decoration:none;
    text-indent:0;
    background:#eaedf1;
    display:inline-block;
}
.upfile input{
    position:absolute;
    font-size:100px;
    right:0;
    top:0;
    opacity:0;
}
.upfile:hover{
    background:#aadffd;
    border-color:#78c3f3;
    color:#004974;
    text-decoration:none;
}

.vm文件
<link href="#spring('/uploadfile.css')" rel="stylesheet" type="text/css" />
....
<form class="form-inline">
    <div class="form-group">
        <label for="name">上传工程文件&#12288</label>
        <input type="text" class="form-control" placeholder="文件名"/>
        <div class="upfile">
            <input type="file" class="btn btn-default" />浏览
        </div>
        <button type="submit" class="btn btn-default" style="background:#217ef2;color:white">上传</button>
    </div>
</form>

这样input file就变成了

隐藏功能：
display:none 不保留物理空间，彻底消失
visible:hidden 占空间，但看不到