织梦 会员图片上传 input type=file 样式美化

网站会员后台默认的图片上传窗口并不好看,所以决定美化一下。

默认上传图片代码
<input type="file" name="litpic" type="file" id="litpic" maxlength="100" class="intxt"/>  
修改后代码
<div class="file-box">
            <input type='text' name='textfield' id='textfield' class='txt' />
            <input type='button' class='btn' value='浏览...' />
            <input type="file" name="litpic" class="file" id="litpic" size="28" onchange="document.getElementById('textfield').value=this.value" />
            <cite>缩略图尺寸400*270像素</cite>
        </div>
修改后样式
.file-box{ position:relative;width:100%;}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }

其实就是将name里面的值和id属性值进行了替换,其它的都不用改。

修改后效果图

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND