标签:
//html代码 <div class="operateWays"> <label> <input type="radio" name="Sex"> <span>男</span> </label> <label> <input type="radio" name="Sex" checked="checked"> <span>女</span> </label> </div> //css代码 .operateWays label{ line-height: 3rem; height: 3rem; margin-right: 5px; position: relative; } .operateWays label input[type=‘radio‘],.operateWays label span{ width: 50px; height:3rem; margin-top:5px; } .operateWays label span{ position: absolute; top: 0px; left: 0px; display: block; text-align: center; border: 1px solid #ddd; background: #fff; color: #666; border-radius: 2px; } .operateWays label input[type=‘radio‘]{ opacity: 0; filter: alpha(opacity=0); } .operateWays label input[type=‘radio‘]:checked+span{ background: #4A943D; border-color: #4A943D; color: #fff; } .operateWays label span:hover{ cursor:pointer; }
最终显示的效果:
//css代码 .fileinputBtn { height: 35px; position: relative; width: 80px; overflow: hidden; } input[type="file"] { position: absolute; top: 0px; left: 0px; font-size: 100px; opacity: 0; filter: alpha(opacity=0); }
.btn-success{
background-color: #3a9d5d;
border-color: #3a9d5d;
-webkit-appearance: push-button;
white-space: nowrap;
font-size: inherit;
-webkit-user-modify: read-only;
margin: 0px;
} //html代码 <div class="fileinput-button fileinputBtn btn btn-success"> <input type="file" name="AdPicture" data-upload-type="IMAGE" accept="image/*"> 上传文件
</div>
最终显示的效果是:
标签:
原文地址:http://www.cnblogs.com/liuhui-03/p/5578531.html