前端开发中经常遇到的一些css问题
导读：一、关于input的问题 1.input可编辑可下拉 item1 item2 2.input下拉 ---请选择分辨率--- 320X240 3.input边线点击不显示...
一、关于input的问题
1.input可编辑可下拉
item1
item2
2.input下拉
---请选择分辨率---
320X240
3.input边线点击不显示
input点击边框样式无效
outline:none;
/**/
4.提示文字：placeholder="手机号"
input修改提示文字颜色
::-webkit-input-placeholder{
/*input提示文字颜色*/
color:#fff;
font-size:20px;
}
5.input出现背景是黄色
这种点击框也不会出现黄色了
input:-webkit-autofill{
box-shadow:000px1000pxwhiteinset!important;
}
还有一种就是关闭自动填充：autocomplete="off"
二、是否占位：显示/隐藏
1.display
display:none;
/*不占位*/
display:block;
/*显示*/
2.visibility
visibility:hidden;
/*占位*/
visibility:visible;
/*显示*/
三、定位
1.绝对定位：position:absolute
父级不自动增高，解决方法：overflow:auto;
2.相对定位：position:relative;
3.固定定位：position:fixed;
四、Textarea
1.div模拟textarea文本域轻松实现高度自适应
.testdisplay{
width:100%;
min-height:200px;
max-height:400px;
margin-left:auto;
margin-right:auto;
outline:0;
font-size:12px;
line-height:24px;
word-wrap:break-word;
overflow-x:hidden;
overflow-y:auto;
/*box-shadow:inset01px3pxrgba(0,0,0,0.1),008pxrgba(82,168,236,0.6);
*/
}
五、手指光标
cursor:pointer;
/*手指光标*/
六、文本省略号
1.单行文本省略号
.digital-limit{
overflow:hidden;
text-overflow:ellipsis;
/*显示...*/
white-space:nowrap;
/*文本不换行，这样超出一行的部分被截取，显示...*/
}
2.多行文本省略号
.digital-normal{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
}
七、滚动条修改样式
::-webkit-scrollbar{
/*滚动条整体样式*/
width:8px!important;
/*高宽分别对应横竖滚动条的尺寸*/
height:8px!important;
}
::-webkit-scrollbar-thumb{
/*滚动条里面小方块*/
border-radius:8px!important;
-webkit-box-shadow:inset008pxrgba(0,0,0,.1)!important;
background:rgba(0,0,0,.1)!important;
}
::-webkit-scrollbar-track{
/*滚动条里面轨道*/
-webkit-box-shadow:inset008pxrgba(0,0,0,0)!important;
border-radius:10px!important;
background:rgba(0,0,0,0)!important;
}
八、透明度
1.背景与字体透明
opacity：0.5;
/*0-1的透明度*/
2.背景透明，字体不透明
background:rgba(216,216,216,.1.5);
九、img图片截图
.historysimg{
width:100%;
height:100%;
position:absolute;
right:-5px;
clip:rect(0103px100px0px);
}
通过js在图片刚刚开始加载的时刻可以获取其宽度和高度，然后用js决定限制图片的高度还是宽度。如何在图片开始加载时获取大小可以在这里找到。
Js:
$(function(){
$('.historysimg').each(function(){
var$this=$(this);
imgReady($this.attr('src'),function(){
if(this.width>
this.height){
$this.attr('height','100');
$this.removeAttr('width');
}
}
);
}
);
}
);
十、背景图
1.尺寸等比扩展图片来填满元素，即cover值：background-size:cover;
2.尺寸等比缩小图片来适应元素的尺寸，即contain值：background-size:contain;
3.尺寸以图片自身大小来填充元素，即auto值：background-size:auto;
4.图片模糊
使用filter()函数实现模糊背景，使用方法：
-webkit-filter:blur(5px);
/*Chrome,Safari,Opera*/
filter:blur(5px);
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 前端开发中经常遇到的一些css问题
本文地址： https://pptw.com/jishu/664637.html