无限星辰工作室-客户无限互联网动力之源

标题: 一个简单的上传按键样式 [打印本页]
作者: crx349    时间: 2014-11-25 22:40
标题: 一个简单的上传按键样式
1.样式图片


2.css部分
  1. <style type="text/css">
  2.                                         .input-file {
  3. display:inline-block;
  4. width:85px;
  5. height:20px;
  6. line-height:30px;
  7. background:#ddd;
  8. text-align:center;
  9. overflow:hidden;
  10. position:relative;
  11. background:url(images/hua_43.jpg);
  12. }
  13. .input-file:hover {
  14. background:url(images/hua_43.jpg);
  15. }
  16. .input-file input {
  17. opacity:0;
  18. filter:alpha(opacity=0);
  19. font-size:100px;
  20. position:absolute;
  21. top:0;
  22. right:0;
  23. }
复制代码
3.html嵌入
  1. <a href="javascript:void(0);" class="input-file"><input name='name' type='file' size='50' data-valid-name='图片' data-valid-empty='yes' data-valid-accept='jpg,jpeg,gif,png,bmp'></a>
复制代码

4.效果如下
(, 下载次数: 1444)





欢迎光临 无限星辰工作室-客户无限互联网动力之源 (https://xmspace.net/) Powered by Discuz! X3.4