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;
}