input上传按钮的优化
在使用input标签按钮的时候,<input type="file" value="" />
显示很难看,怎么办?
使用label
<li class="ware-list mt10">
<span class="vel-tit">上传文件:</span>
<input class="inputText fix file_up" value="" type="text">
<input id ="up_file" onchange="change(event)" class="inputText fix" value="" type="file" style="display:none">
<label for="up_file"><div class="btn-primary" style="float:left;height:34px;line-height:34px" >上传文件</div></label>
</li> <li class="ware-list mt10">
<span class="vel-tit">上传图标:</span>
<label for="up_img">
<div style="float:left;"><img ms-duplex="icon" ms-attr-src="{{icon}}"></div>
</label>
<input id ="up_img" onchange="upimg(event)" class="inputText fix" value="" type="file" style="display:none">
<label for="up_img"><div class="btn-primary" style="float:left;height:34px;line-height:34px" >添加图片</div></label> </li>
在上传文件的地方:我将上传input标签隐藏,将上传按钮label到input标签上,点击上传按钮的时候,其实质是在点击input[file]按钮
input上传按钮的优化的更多相关文章
- 上传按钮样式优化 <input type="file" />
<html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...
- input上传按钮美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- input上传按钮 文字修改办法
解决思路是把input 放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件的上传. 具体代码: <style> #uploadImg{ font-size ...
- input[type=file] 样式美化,input上传按钮美化
<style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...
- 一个漂亮的上传按钮input[type=file]
;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...
- input美化上传按钮美化
今天工作需求碰到 样式改变上传按钮 效果: <a href="javascript:;" class="a-upload"> <input t ...
- JQuery上传插件uploadify优化
旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...
- webuploader的一个页面多个上传按钮实例
借鉴一位大佬的demo 附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览 直接上传图片后拿到回传地址给img标签显示图 ...
随机推荐
- Hibernate 框架
首先,我们先来了解一下什么是 Hibernate 框架. 什么是 Hibernate 框架? Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO ...
- 【POJ - 2229】Sumsets(完全背包)
Sumsets 直接翻译了 Descriptions Farmer John 让奶牛们找一些数加起来等于一个给出的数N.但是奶牛们只会用2的整数幂.下面是凑出7的方式 1) 1+1+1+1+1+1+1 ...
- 【0729 | Day 3】Python基础(一)
Part 1 变量 一.什么是变量? 字面意思:变化的量. 而在计算机中,我们可以将它理解为世间万物变化的状态. 二.为什么要有变量? 首先,无论是我们还是计算机都需要变量来记录发生的状态的变化,其次 ...
- 使用DOM4J 对xml解析操作
参考自:https://blog.csdn.net/redarmy_chen/article/details/12969219 dom4j是一个Java的XML API,类似于jdom,用来读写XML ...
- 实现ssr服务端渲染demo
最近在研究SSR服务器端渲染,自己写了的小demo. 项目布局 ├── build // 配置文件 │ │── webpack.base // 公共配置 │ │── webpack.clien ...
- 重读《学习JavaScript数据结构与算法-第三版》- 第4章 栈
定场诗 金山竹影几千秋,云索高飞水自流: 万里长江飘玉带,一轮银月滚金球. 远自湖北三千里,近到江南十六州: 美景一时观不透,天缘有分画中游. 前言 本章是重读<学习JavaScript数据结构 ...
- 多渠道推广场景下,如何实现 App 用户增长的精准归因?
为了实现用户的快速增长,以推广 App 为目标的线上广告投放是很多平台获取新用户的重要方式.随道移动互联网的发展,现在 App 推广的渠道越来越丰富,除了 WAP 站点.第三方 App 之外,HTML ...
- c中自增自减的妙用
#include <stdio.h> int main() { ; printf("%d,%d,%d,%d",i++;i--;++i;--i); /*运算从右往左运算 ...
- SpingBoot:整合Elasticsearch7.2.0
Spring boot 2.1.X整合Elasticsearch最新版的一处问题 新版本的Spring boot 2的spring-boot-starter-data-elasticsearch中支持 ...
- input样式重置(outline:none)
我们在写表单的时候,经常需要自定义表单的样式,当然input输入框也不例外,那么如何能写出好看一点的输入框呢? 例如简单的三个空按钮: <input type="button" ...