Bootstrap修改input file默认样式

html部分 <div class="form-group"> <label class="col-sm-3 control-label">选择数据文件</label> <div class="input-group"> <input id="docPath" type="text" class="form-control">…

Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多网页的风格都不太协调. 根据用户的需求,设计风格,改变其显示样式的场合就比较多了. 如果,要像下面一样做一个bootstrap风格的上传按钮该如何实现. 搭建上传按钮所需的基本元素 <span class=""> <span>上传</span> <…

修改input输入框的样式

直接上代码 <style> .input{ -web-kit-appearance:none; -moz-appearance: none; font-size:1.4em; height:2.0em; border-radius:5px; border:1px solid #c8cccf; color:#6a6f77; outline:0; text-align:center; } .input:focus{ border:1px solid #ff0000; } </style>…

JS 更改表单的提交时间和Input file的样式

JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '', 'g')); return da.getFullYear() + "/" + da.getMonth() + "/" + da.getDay() + "/" + da.getHours() + ":" + da.getSeco…

css样式之input输入框默认样式

帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用(代码和效果图就就不粘出来了). 查资料后才知道html的许多标签都有一些默认的属性,这次遇到的是input标签的默认属性(点击输入框时会出现 "蓝色边框" ).话不多说,解决方法如下: 一.直接给input标签加一个online:none的样式 <style> input {…

html5中如何更改、去掉input type默认样式

1.如何去掉input type=date 默认样式 HTML代码: 选择日期:<input type="date" value="2017-06-01" /> 选择时间:<input type="time" value="22:52" /> 选择星期:<input type="week" /> 选择月份:<input type="month"…

修改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 {…

react中修改antd的默认样式

最近在做react+antd项目.不可避免的遇到了修改antd默认样式的问题. 比如,table组件的表头背景色设置,如果直接使用元素样式,会修改整个项目的table.这里我用的方法是,给table添加一个div父元素,给他设置个className,然后设置这个样式内的table表头样式. 我使用的.less预编译. <div className={styles.boxW} > <Table columns={colType} rowKey='fxwd' pagination={fals…

修改select的默认样式

在我们用select的时候,通常因为他的默认样式比较丑而用自己样式,那首先要去掉他的默认样式去掉select的边框和点击时的蓝色边框 select{border: none;outline: none;} 去掉select下拉的小三角 select{ appearance:none; -moz-appearance:none; -webkit-appearance:none; } select::-ms-expand { display: none; } /*清除ie的默认选择框样式清除,隐藏…

修改input标签输入样式

去掉input自带的边框: border-style:none;修改input输入的文字样式: input{ font-size: 24px; color:#5d6494; } 修改input框中占位符的样式: ::-webkit-input-placeholder { color:#9195ad; } ::-moz-placeholder { color:#9195ad; } /* firefox 19+ */ :-ms-input-placeholder { color:#9195ad; }…

input[type='file']默认样式

<input type="file" name="" id="" value="" /> 当input的type为file会有一个默认的hover,就是你鼠标放在按钮上时候,会有一个title显示. 上传文件后显示文件名,未上传时候显示“未选择任何文件”. 有时候UI设计或者是其他考虑需要去掉这个默认设置. 方法很简单: <input type="file" title="&qu…

修改input:file样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Uploadfile</title> <style> *{ margin: 0; padding: 0; } a{ width: 200px;height: 30px;background-color: blue;display: block;margin: 100px auto;…

css3修改浏览器scroll默认样式

最近公司的新项目.前端样式采用的蚂蚁金服的antDesign. 比较喜欢antDesign.BootStrap一类简约大方的前端样式库. 但是在页面布局上.包括一些选择框.默认的scroll样式简直丑爆. 遂度娘资料,通过css3进行修改. /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 4px; height: 4px; background-color: #F5F5F5; } /*定义滚动条轨道内阴影+圆角*/ ::-w…

Chrome 下input的默认样式

一.去除默认边框以及padding border: none;padding:0 二.去除聚焦蓝色边框 outline: none; 三.form表单自动填充变色 1.给input设置内置阴影,至少要比你的input本身大.不过,box-shadow是很慢的,适当大小.而且,如果你的input是用图片做背景的话,是没有办法做这么干的.设置transparent也不可以. input:-webkit-autofill, textarea:-webkit-autofill, select:-webk…

修改easyui panel 默认样式

有这么个需求需要修改easyui panel头部中的背景色.于是根据panel中的最终被浏览器解析出来的类名,直接修改这个css样式,设置backgroud-color这个属性,发现不管用. 于是,就根据panel最后被解析出来的样式类名,手动的建这个类名,然后把背景色修改为白色,发现也无济于事. 经过摸索有两种办法: 1,在引入的easyui.css样式表中,添加没有背景色的样式,下面的样式必须放到easui.css中去,注意:单击建一个css文件,并把下面的代码拷过来就可以了.这个缺点是严重…

去除input的默认样式

input, button, select, textarea { outline: none; -webkit-appearance: none; border-radius: 0; } outline: none; 去掉chrome浏览器自带的点击input框出现边框情况 -webkit-appearance: button; 使元素标签看起来像个按钮样式,意思定义了按钮样式 -webkit-appearance: none;去掉按钮样 border-radius: 0;去掉圆角…

清除苹果手机input的默认样式

在手机端上写了一个页面,按钮的地方是用input标签button按钮,给的是绿色的背景颜色,在安卓手机上显示正常,在苹果手机上显示不正常,如下图解决办法: css加上下面这一行代码就可以了,input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; } 希望能帮到你~…

修改input框默认黄色背景

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; background-color: rgb(0, 0, 0) !important; background-image: none !important; color: rgb(0, 0, 0) !important; -web…

隐藏"Input"标签默认样式

input { width: 400px; border: none; background-color: inherit; border-bottom: #fbfee9 solid 3px; font-size: 2.4em; color: snow; } input:focus { background-color: inherit; border: none; border-bottom: #fbfee9 solid 3px; }…

input的默认样式去除

outline:none;-----可去除input=text,的输入框输入时的亮边.…

移除 ios 上 input 的默认样式

input{ -webkit-appearance:none; }…

清除input的默认样式

input { border: none; outline: none; -webkit-appearance: none; }…

css修改overflow滚动条默认样式

html代码 <div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="height:400px;">这里是内容222</p> <p>这里是内容333</p> </div> </div>…

修改 Input placeholder 的样式

::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ccc; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ccc; } :-ms-input-placeholder { /* Internet Explorer 10+ */ col…

修改radio、checkbox、select默认样式的方法

样式 radio select checkbox 兼容性现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.checkbox.select的方法. 首先上效果图: radio and checkbox 修改radio的默认样式有两种常用的方法纯CSS 此方法需借助CSS3,关键CSS代码如下 .demo1 input[type='radio'],.demo1 input[type="checkbox&quo…

使用<label>标签修改input[type="checkbox"]的样式

因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type="checkbox" name="sex" id="male" /> <label for="male">Male</label> </form> 所以正适合用于修改input的样式. 进入正文, 修…

响应式移动端去除css的hover和jq的hover还有input在苹果下的默认样式

去除css的hover: /*直接给body添加ontouchstart*/ <body ontouchstart> 去除jq的hover: var winW01 = $(window).width();/*获取屏幕宽度*/ /*判断屏幕宽度下雨880让元素去除绑定的hover事件*/ if(winW01<=880){ $(".menu3").unbind('mouseenter').unbind('mouseleave'); } 去除safari浏览器下input的…

关于前端滚动条，input框等样式的修改

1.改变滚动条的样式 .orderList::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px;}.orderList::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);}.o…

Ionic4.x Theming(主题) 增加内置主题颜色修改内置组件默认样式修改底部 Tabs 背景颜色以及按钮颜色

1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.com/docs/theming/advanced 2.Ionic4.x 增加内置主题颜色找到 src/theme/variables.scss 文件,如下代码新增 favorite 颜色 .ion-color-favorite { --ion-color-base: #69bb7b; --ion-…

ng-zorro等组件默认样式的修改

https://www.jianshu.com/p/8b887c2aac06 在项目中修改ng-zorro组件默认样式的一些方法: 类名等前加::ng-deep: 类名等前加:root: 类名等前加:host /deep/: ::ng-deep .ant-spin-dot i { background-color: #4c7bff; } :host ::ng-deep .ant-spin-dot i { background-color: #4c7bff; } :root .ant-sel…