1.移动端链接元素的点击高光效果取消
移动端点击链接元素时,会出现半透明背景,
通过给给a标签设置-webkit-tap-highlight-color:transparent,即可去除。
a{
-webkit-tap-highlight-color:transparent
}
2.禁止照片a标签被拖动
在img标签内添加draggable=“false”
<img src="photo.jpg" draggable="false">
<a href="" draggable="false">禁止拖拽</a>
或者给图片的css样式添加*-webkit-user-drag*:none;即可禁止
{
-webkit-user-drag:none;
}
3.去除文字双击选中的默认样式
去除文字双击选中的蓝色背景
{
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE/Edge */
user-select: none;
}
4.去除链接周围的虚线
去除链接元素被点击时周围出现的虚线,
如果想去除所有<a>元素的虚线:
a {
outline: none;
}
5.去除图像下方的空白
去除所有<img>元素的空白
img {
vertical-align: bottom;
}
6.去除输入框轮廓
input {
outline: none;
}
7.去除输入框的自动填充背景色
除所有元素的自动填充背景色
input {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
8.除元素的可调整大小属性
textarea {
resize: none;
}
9.去除表格的单元格间距
table {
border-collapse: collapse;
}
10.去除滚动条
去除整个网页的滚动条
html {
overflow: hidden;
}
11.去除元素的默认样式
button {
appearance: none;
}
12.去除输入框的默认样式
input {
appearance: none;
}
13.去除选择框的默认样式
去除元素的默认样式
select {
appearance: none;
}
14.去除单选按钮、复选框、文件的默认样式
//去除单选按钮的默认样式:
input[type="radio"] {
appearance: none;
}
//去除复选框的默认样式:
input[type="checkbox"] {
appearance: none;
}
//去除文件输入框的默认样式:
input[type="file"] {
appearance: none;
}
15.多行文本省略:
overflow:hidden;
text-overflow:ellipsis;
display:-webbkit-box;
-webkit-line-clamp:2; //最大显示几行
-webkit-box-orient: vwetical
white-space:normal !important
word-wrap:back-word;
16.input框的placeholder字体颜色
直接修改:
input::placeholder{
color:red
}
兼容性写法:
input::-webkit-input-placeholder{
/*Webkit browsers 适配 Chrome */
color: #fff;
}
input:-moz-input-placeholder{
/*Mozilla Firefox 4 to 18 适配 Firefox */
color: #fff;
}
input::-moz-input-placeholder{
/*Mozilla Firefox 119+ 适配 Firefox */
color: #fff;
}
input:-ms-input-placeholder{
/*Internet Explorer 10+ 适配 IE */
color: #fff;
}