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框等样式的修改的更多相关文章

  1. 消除input框的默认样式

    input, button, select, textarea { outline: none; -webkit-appearance: none; border-radius: 0; } outli ...

  2. 前端获取文件input框的美化操作

    前面我们说了一种利用input框和js的当时获取本地文件内容的情况-详细信息参考 2017年11月8日前端用js获取本地文件的内容 以上方式获取的按钮是系统默认的显示,有时候我们需要对按钮的外观进行美 ...

  3. input框改变默认样式

      input[type="radio"] { width: 2rem; height: 2rem; -webkit-appearance: none; /*清除复选框默认样式*/ ...

  4. input选择框默认样式修改

    input选择框是无法直接修改样式,我们只能间接来改变它样式. 原理:用图片来代替原来的input选择框,原来的input选择框定位到图片上方并让它opacity为0,鼠标点击时用js来改变图片,这样 ...

  5. 替换input单选框的样式

    实现效果:. css的input单选框的样式很丑,有时候不想使用原生的样式,如上照片,可以使用下面的方法. 思路是,给inpu加visibility:hidden隐藏,然后使用不同的图片绝对定位覆盖在 ...

  6. 小实例---关于input宽度自适应以及多个input框合并拆分

    前两个月,公司内部需要开发关于大数据方面的辅助工具语料分词系统,在这个项目中遇到以下几个主要问题,在此分享~ 一.input宽度根据内定文本宽度自适应 背景:项目需求中,前台展示,需要从后台获取的.t ...

  7. jQuery实现input框输入值动态搜索

    我们在平时的前端开发中,经常会遇到添加数据,如果在添加之前要指定某个用户或对象进行关联,那在实现上要比普通的添加要繁琐一点.我本来的想法是给一个iframe,在 里面显示所有的数据并提供一个筛选的功能 ...

  8. js自定义修改复选框单选框样式,清除复选框单选框默认样式

    之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...

  9. 定制 input[type="radio"] 和 input[type="checkbox"] 样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

随机推荐

  1. .NET中制做对象的副本(一)

    .NET中对于复杂对象制作副本比较困难,闲暇之时写了这个方法,和大家分享. 本案例用于大型对象的副本制作,常见的应用场景就是树形对象节点的拷贝,但是也有局限性,目前使用于类里有基本类型(int sti ...

  2. Python全栈(第一部分)day3

    昨日内容回顾 格式化输出 %s %d %% 编码 ascii: 只能显示英文,特殊字符,数字 万国码unicode: 最开始16位,中文不够,用32位,占用4个字节 升级: utf-8 utf-16 ...

  3. 【转】MySQL— 进阶

    [转]MySQL— 进阶 目录 一.视图 二.触发器 三.函数 四.存储过程 五.事务 一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需 ...

  4. MySQL:Your password has expired. To log in you must change it using a client that supports expired passwords

    MySQL:V5.6.37 安装后发现没远程权限,为了方便,就直接把hostname@root修改为%@root,密码修改为和localhost@root一样 然后尴尬的事情发生了,本地登陆正常,远程 ...

  5. cocosCreater开发时遇到的问题

    生成vscode任务后无法编译: ctrl +p  -> 输入task compile 编译任务时提示 :由于使用任务版本 0.1.0,以下工作区文件夹将被忽略 这是cocos默认生成的code ...

  6. Spring Cloud Sleuth超详细实战

    为什么需要Spring Cloud Sleuth 微服务架构是一个分布式架构,它按业务划分服务单元,一个分布式系统往往有很多个服务单元.由于服务单元数量众多,业务的复杂性,如果出现了错误和异常,很难去 ...

  7. 一篇文章让你了解Android各个版本的历程

    2008年--至今 Android 1.5(Cupcake纸杯蛋糕): 智能虚拟键盘:使用widgets实现桌面个性化:在线文件夹(Live Folder)快速浏览在线数据:视频录制和分享:图片上传: ...

  8. PID控制器开发笔记之五:变积分PID控制器的实现

    在普通的PID控制算法中,由于积分系数Ki是常数,所以在整个控制过程中,积分增量是不变的.然而,系统对于积分项的要求是,系统偏差大时,积分作用应该减弱甚至是全无,而在偏差小时,则应该加强.积分系数取大 ...

  9. org.apache.catalina.core.DefaultInstanceManager cannot be cast to org.apache.tomcat.InstanceManager

    1.控制台报错信息 严重: Servlet.service() for servlet [jsp] in context with path [/Resource] threw exception [ ...

  10. 用Github发布静态页面

    一.以下几个简单的步骤   前提是得有 Github 账号啊!!! 在 Github 上新建一个仓库 New repository 填写仓库的名字,勾选 public 和 Initalize this ...