input框和滚动条默认样式的修改

input框和滚动条默认样式的修改

一、修改input默认样式

鼠标悬浮：input:hover{样式}
点击属性：input:focus{样式}
去掉未选中状态边框： border: 0 ;
去掉选中状态的边框： outline: none ;
透明背景： background-color：rgba（0，0，0，0）；
修改input的选中时的光标颜色： caret-color: red ;

input placeholder属性 样式修改

input::-webkit-input-placeholder { /* WebKit, Blink, Edge /
color: #909;
}
input:-moz-placeholder { / Mozilla Firefox 4 to 18 /
color: #909;
}
input::-moz-placeholder { / Mozilla Firefox 19+ /
color: #909;
}
input:-ms-input-placeholder { / Internet Explorer 10-11 */
color: #909;
}

二、滚动条默认样式的修改

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

使用 （全局修改）

::-webkit-scrollbar { /滚动条整体样式/
width: 8px;
height: 330px;
background-color: #EDEDED;
}
::-webkit-scrollbar-thumb { /滚动条里面的滑块/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #CDCCCC;
}
::-webkit-scrollbar-track {/滚动条里面轨道/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;

}