仿照Bootstrap的input 修改 upload上传图片的样式

html:

<div class="form-group">
    <label class="col-sm-3 col-sm-6 control-label">图片</label>
    <span class="problem-must"> </span>
    <div class="col-sm-8">
        <a class="fb-upload" href="javascript:void(0);"> 
            <input class="form-control" name="pic" type="file" accept=".gif,.jpg,.png,.jpeg" /> 
            <span class="fb-img">上传图片</span>
	</a>
    </div>
</div>

css:

.form-group input[type="file"] {
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 0;
}
.fb-img {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: gray;
    display: inline-block;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    text-align: left;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}
时间: 2024-10-11 13:21:05

仿照Bootstrap的input 修改 upload上传图片的样式的相关文章

Django html file upload 上传图片

html file upload 上传图片     第一步: 这是一个上传图片的按钮 <form class="form-horizontal" method="post" action="{% url 'create_article' %}" enctype="multipart/form-data"> {% csrf_token %}   <div class="form-group"

前端实现input[type=&#39;file&#39;]上传图片预览效果

众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现:一是前后台交互,后台将图片地址返回前端: 二是,我今天写的内容,使用FileReader对象--允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容:此种方法可以优化图片加载速度,减少方法一占用带宽的问题: 但是,此种方法兼容性存在问题,主要是IE浏览器(ie10以上没问题

Bootstrap File Input的简单使用

安装引入 使用前需要引入其css和js文件, 注意引入路径的问题 <link rel="stylesheet" href="/__PUB__/fileinput/css/fileinput.css"> <script src="/__PUB__/fileinput/js/fileinput.js"></script> <script src="/__PUB__/fileinput/js/loca

&lt;input type = file/&gt;上传图片限制大小、类型判断、像素判断

<input type = file/>上传图片限制大小.类型判断.像素判断 在项目中经常用到input标签来上传文件,而这些文件通常是图片文件.图片有很多格式我们只需要其中的几种,就需要对用户上传的文件进行验证,在HTML5中有一个新的属性:accept文件类型限制.但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制.类型判断.像素判断 <!DOCTYPE html> <html> <head> <meta charse

纯css兼容个浏览器input[type=&#39;radio&#39;]不能自定义样式

各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-account"> <input type="checkbox"> <span>记住账号</span> </div> //css .remember-account { display: inline-block; font-siz

取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“&#215;”按钮去除办法

取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: input::-ms-clear { display: none; }

取消chrome浏览器下input和textarea的默认样式

最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动textarea还会使页面布局错乱,所以决定重置这些样式. 看代码: 取消chrome下input和textarea的聚焦边框: input,button,select,textarea{outline:none} 取消chrome下textarea可拖动放大: textarea{resize:none} 最

【百度地图API1.1】修改文本标注的样式

原文:[百度地图API1.1]修改文本标注的样式 百度地图API1.0中文本标注的样式写法为: label.getDom().style.borderColor = "#808080"; label.getDom().style.color = "#333"; label.getDom().style.cursor = "pointer"; 2010年12月,百度地图API升级至1.1版本,文本标注的样式写法需要修改为:(否则将会导致鼠标点击失灵

修改element ui 默认样式最好的解释

KedAyAyA 17年10月 https://forum.vuejs.org/t/elementui/19171/5 首先添加了scoped的style标签会在vue-loader里进行处理 所谓的局部css 就是在你当前组件里的所有html标签打一个data-tag 例如 然后会把你scoped里的css编译为 xxx[ data-v-4d856c52] 知道了scoped的作用,来看看为什么我们不能修改el-table里的样式 如果你修改样式你一定会这么写css .table th {xx