关于前端滚动条,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);
}
.orderList::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
2.消除input的默认样式
input, button, select, textarea {
outline: none;
-webkit-appearance: none;
border-radius: 0;
}
3.改变input,textarea的placeholder的样式
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #fff;
font-size:16px;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #fff;
font-size:16px;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #fff;
font-size:16px;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #fff;
font-size:16px;
}
关于前端滚动条,input框等样式的修改的更多相关文章
- 消除input框的默认样式
input, button, select, textarea { outline: none; -webkit-appearance: none; border-radius: 0; } outli ...
- 前端获取文件input框的美化操作
前面我们说了一种利用input框和js的当时获取本地文件内容的情况-详细信息参考 2017年11月8日前端用js获取本地文件的内容 以上方式获取的按钮是系统默认的显示,有时候我们需要对按钮的外观进行美 ...
- input框改变默认样式
input[type="radio"] { width: 2rem; height: 2rem; -webkit-appearance: none; /*清除复选框默认样式*/ ...
- input选择框默认样式修改
input选择框是无法直接修改样式,我们只能间接来改变它样式. 原理:用图片来代替原来的input选择框,原来的input选择框定位到图片上方并让它opacity为0,鼠标点击时用js来改变图片,这样 ...
- 替换input单选框的样式
实现效果:. css的input单选框的样式很丑,有时候不想使用原生的样式,如上照片,可以使用下面的方法. 思路是,给inpu加visibility:hidden隐藏,然后使用不同的图片绝对定位覆盖在 ...
- 小实例---关于input宽度自适应以及多个input框合并拆分
前两个月,公司内部需要开发关于大数据方面的辅助工具语料分词系统,在这个项目中遇到以下几个主要问题,在此分享~ 一.input宽度根据内定文本宽度自适应 背景:项目需求中,前台展示,需要从后台获取的.t ...
- jQuery实现input框输入值动态搜索
我们在平时的前端开发中,经常会遇到添加数据,如果在添加之前要指定某个用户或对象进行关联,那在实现上要比普通的添加要繁琐一点.我本来的想法是给一个iframe,在 里面显示所有的数据并提供一个筛选的功能 ...
- js自定义修改复选框单选框样式,清除复选框单选框默认样式
之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
随机推荐
- tp5.0 SHOW COLUMNS FROM 生成数据表字段缓存
TP5.0 生成数据表字段缓存 =控制台执行以下命令= 1.生成指定数据库的所有表字段缓存 php think optimize:schema --db databaseName 2.生成指定数据表的 ...
- Listary的使用
前几天研究米老师语录之后,开始对工具的使用着迷.现在的慢是为了以后的快,所以现在研究的一些东西,是为了以后在工作中可以更加快速的提高效率. 最近找到了一款很不错的软件,Listary.想给小伙伴们介绍 ...
- HDOJ 1004 Let the Balloon Rise (字符串+stl)
题目: Problem Description Contest time again! How excited it is to see balloons floating around. But t ...
- dubbo源码分析14——DubboProtocol的export方法分析
走到了这一步也挺不容易的,把之前的暴露入口代码再列出来回顾一下: //配置为none不暴露 if (! Constants.SCOPE_NONE.toString().equalsIgnoreCase ...
- codeforces 416div.2
A CodeForces 811A Vladik and Courtesy B CodeForces 811B Vladik and Complicated Book C CodeFo ...
- Laravel 5.2--git冲突error: Your local changes to the following files would be overwritten by merge:
今天在服务器上git pull是出现以下错误: error: Your local changes to the following files would be overwritten by mer ...
- 【原创】运维基础之Ansible(2)离线安装
1 在一个能访问远程repo的服务器上执行,下载ansible及相关依赖的rpm包 # mkdir ansible# yum install --downloadonly --downloaddir= ...
- [转]phpstorm激活码注册码序列号
浏览器打开 http://idea.lanyus.com/ , 点击页面中的“获得注册码”,然后在注册时切换至Activation Code选项,输入获得的注册码一长串字符串,就可以注册成功!(推荐方 ...
- Stetho简化Android调试(二)
Stetho简化Android调试(一) 一文中讲述了如何使用Stetho结合Chrome远程调试Android App. Stetho给我们调试带来很大的便利,效率显著提升的同时也产生一个问题:如果 ...
- noj算法 装载问题 回溯法
描述: 有两艘船,载重量分别是c1. c2,n个集装箱,重量是wi (i=1…n),且所有集装箱的总重量不超过c1+c2.确定是否有可能将所有集装箱全部装入两艘船. 输入: 多个测例,每个测例的输入占 ...